Firefox 如何用响应式设计模式检查移动端断点：设备尺寸与截图导出

移动端页面到底在哪个宽度开始变形，靠猜常见机型并不可靠。打开 Firefox 的开发者工具后，可以在响应式设计模式里直接改视口宽度，观察导航、卡片和文字是否在内容真正开始拥挤的位置发生变化；确认断点后，再把当前页面保存成截图交给同事复查。

先用内容开始变差的宽度确定断点，再用 Responsive Design Mode 的设备尺寸和截图功能复核，不要先套一组固定手机宽度。

准备一个能看出变化的测试页面

先准备一个公开测试页或本地开发页。下面的判断只依赖页面布局，不需要登录账号，也不要把包含 Cookie、令牌或个人路径的页面截图上传给别人。Mozilla 的 CSS 媒体查询示例说明，断点应放在内容开始难读的位置，而不是盯着某个具体设备型号。

步骤一：从开发者工具进入响应式设计模式

在 Firefox 打开测试页面后，点击右上角菜单 ☰ → 更多工具 → Web 开发者工具，也可以按 F12 打开开发者工具。工具出现后，在工具栏中选择手机形状的 Responsive Design Mode 图标；进入后，页面会被放进一个可调整的设备视口。

如果工具停留在 Inspector，先完成这一步再调整页面。下面的官方截图展示了 Firefox 开发者工具与页面同时出现的真实界面，底部可以看到 Inspector、Console、Debugger、Performance 和 Network 等面板；这就是后续寻找响应式设计模式入口的上下文。

可见成功状态是：页面进入设备模拟视口，工具栏出现设备选择、宽度、高度、DPR 和网络节流等控件。若仍是普通网页全宽显示，说明图标没有打开，先不要记录断点。

步骤二：设置设备尺寸并找到内容断点

在响应式设计模式顶部，点击设备下拉框选择一个接近目标用户的尺寸；如果没有合适预设，直接填写宽度和高度字段。先把宽度调到 414，高度调到 736，然后逐步向下调整，每次只改一个维度。

观察导航是否折行、按钮是否互相挤压、正文是否出现过长行或横向滚动。真正值得记录的断点，是内容刚开始变差的宽度。例如导航在 760px 仍然完整，但到 700px 开始换行，就应围绕 700px 前后做两次复查，而不是直接写死成某个手机型号的宽度。

如果页面需要核对元素尺寸，切回 Inspector，点选目标元素，再看右侧的 Layout/Box Model 区域。官方文档中的 Firefox DevTools 截图展示了选中元素后检查尺寸和 CSS 规则的真实状态，可用来确认问题究竟是视口太窄，还是元素自身的宽度、内边距或边框造成的。

可见成功状态是：顶部宽度和高度字段显示你刚填写的值，页面布局随宽度变化，且你能指出某个具体组件从“完整”变为“折行、挤压或出现滚动”的临界区间。

步骤三：导出当前视口截图并复查

确定视口尺寸后，先让页面停留在需要留证的滚动位置。可在开发者工具的 Console 中输入 :screenshot firefox-breakpoint.png --fullpage 导出整页；如果只需要当前可见区域，去掉 --fullpage。Mozilla 的 Firefox 版本说明记录了这个 Console 截图命令及其参数含义。

导出后打开本地文件，检查截图是否包含浏览器外的隐私信息、是否确实对应记录的宽高，以及关键组件是否处在目标状态。截图只用于复查，不等于断点已经正确：还要回到普通窗口或另一个宽度再看一次，确认布局不是偶然卡在某个滚动位置。

几个容易误判的地方

• 不要把设备预设名称当成断点。断点服务于内容可读性，预设只是复查入口。
• 只改宽度，不记录高度，可能把“首屏位置变化”误认为布局断点；至少保留一组宽高组合。
• 看到横向滚动时先检查被选中的元素和 Box Model，可能是固定宽度图片或内边距，而不是媒体查询缺失。
• 截图前清掉地址栏中的敏感查询参数，并确认页面没有个人账号、令牌或内部域名。

验收清单

完成后应能复述完整路径：打开 Firefox 开发者工具 → Responsive Design Mode → 填写宽度和高度 → 观察内容变差的区间 → 必要时在 Inspector 的 Layout/Box Model 核对尺寸 → Console 执行截图命令。截图文件名、视口宽高和观察到的布局变化三者一致，这次断点检查才算可复查。

相关问题

应该优先选择哪个设备预设？

优先选择真实用户占比高的设备尺寸；如果没有数据，先使用一个常见竖屏尺寸，再用自定义宽度寻找内容开始变差的位置。

截图导出后能否直接证明断点正确？

不能。截图只能固定一个观察状态，还需要在临界宽度两侧复查，并确认问题来自布局规则而不是固定尺寸元素。

官方资料

MDN：Media query fundamentals；MDN：What are browser developer tools?；MDN：Firefox 62 release notes for developers。