火狐浏览器中需用ctrl+shift+m（win/linux）或cmd+opt+m（mac）快捷键启用响应式设计模式，在已打开网页后选择预设机型或手动配置分辨率、dpr及完整ua字符串，同步触发视口重排、dpr计算与触摸事件模拟，再结合开发者工具实时调试样式与断点。
你需要在火狐浏览器里快速验证网页在iPhone 15 Pro、iPad Pro或三星S23上的真实渲染效果，而不是靠猜测或反复用真机测试。必须同步触发视口重排、设备像素比（DPR）计算和触摸事件模拟，否则rem单位错乱、@media断点不生效、:hover伪类残留，调试结果完全失真。
启用响应式设计模式并选择预设机型
按下 Ctrl + Shift + M（Windows/Linux）或 Cmd + Opt + M（macOS），直接激活响应式设计模式。这一步不能用鼠标点菜单替代，某些语言包缺失的版本中“更多工具→Web 开发者→响应式设计模式”路径会不可见。
必须在已打开目标网页后操作，否则设备下拉框为空、UA字符串无法加载。
点击顶部设备下拉菜单 → 从预设列表中选择“iPhone 15 Pro”或“iPad Pro (12.9-inch)”等型号 → 页面立即按该设备的分辨率、像素比和默认User-Agent重载。
这一步会同步修改视口尺寸和HTTP请求头中的User-Agent字符串，服务器收到的是真实的移动端标识，能触发真正的手机页面逻辑，不是单纯CSS缩放。
手动配置未预设设备参数
方法一：在响应式设计模式激活状态下，点击顶部工具栏右侧的三个点图标 → 选择“编辑设备像素比”或“编辑用户代理”。
方法二：直接点击设备名称旁的齿轮图标 → 在弹出面板中输入精确数值：宽度（如390）、高度（如844）、设备像素比（如3）、User-Agent字符串（例如iPhone 15 Pro对应：Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1）。
必须粘贴完整且无空格的User-Agent字符串，少一个字符都可能让服务器返回桌面版。
确认后刷新页面，即可模拟任意未预设的设备，比如小众安卓机型或新版iOS系统。
实时调试响应式布局与样式
第一步：保持响应式设计模式开启 → 按 F12 打开完整开发者工具面板。
第二步：切换到“检查器”（Inspector）标签页，用鼠标悬停或点击页面元素，右侧实时显示该元素的盒模型与所有匹配的CSS规则。
第三步：在右侧样式面板中，找到被划掉的属性——它们被更高优先级规则覆盖；点击属性名左侧的复选框可临时禁用某条样式，快速验证视觉效果变化。
双击任意CSS值（如max-width: 768px）即可编辑，回车确认。修改立即生效，无需刷新页面。
观察页面右上角是否出现亮起的“Touch”图标。未亮起说明触摸事件未模拟，依赖touchstart的交互样式（如tap-highlight-color、active状态）将无法触发，调试结果失真。
验证不同断点下的布局行为
拖动响应式工具栏底部滑块，连续缩放宽度，观察布局是否在预期断点处发生切换。
重点检查@media (min-width: 768px)和@media (max-width: 480px)是否准确触发——若未触发，说明viewport meta缺失或媒体查询条件写错。
点击右上角旋转图标切换横屏模式，再按 Ctrl + R（Windows/Linux）或 Cmd + R（Mac）强制刷新，确保新方向下所有资源以正确UA重新请求。
