必须用Ctrl+Shift+M（Win/Linux）或Cmd+Option+M（macOS）快捷键进入火狐响应式设计模式，选择预设机型同步调整视口、DPR和User-Agent，才能真实模拟手机端渲染与触摸交互。
你需要在火狐浏览器中真实还原手机端的渲染环境来调试页面布局、触摸交互和响应式样式，而不是仅靠缩放窗口或修改CSS媒体查询——必须同步调整视口尺寸、设备像素比（DPR）和User-Agent字符串，否则JavaScript的mobile检测会失效、1px边框会变粗、@media断点不触发、touch事件伪类无法激活。
用快捷键快速进入响应式设计模式
按 Ctrl + Shift + M（Windows/Linux）或 Cmd + Option + M（macOS），直接激活响应式设计模式。这一步不能通过菜单路径替代，某些语言包下“更多工具→Web开发者”选项会隐藏，快捷键是唯一稳定入口。
页面立即收缩并出现可拖动边框，右上角显示手机/平板图标，表示已进入设备模拟上下文。
选择预设机型获取真实移动端渲染
点击顶部设备下拉菜单 → 选择“iPhone 15 Pro”或“Samsung Galaxy S23”等预设型号。
选中后，火狐会同步三项关键参数：视口尺寸（如390×844）、设备像素比（DPR=3）、User-Agent字符串（如Mozilla/5.0 (iPhone; CPU iPhone OS 17_5) AppleWebKit/605.1.15 Safari/604.1）。【缺一不可——只调尺寸不改DPR会导致1px边框变粗，不换UA则JavaScript中mobile检测逻辑可能跳过关键样式】
页面自动刷新，Network面板任一请求的Request Headers中User-Agent字段已更新，服务器返回的是真实手机版HTML与CSS。
手动配置未预设设备参数
方法一：点击设备名称旁的齿轮图标 → 在弹出面板中输入精确数值：宽度（如412）、高度（如915）、设备像素比（如2.625）、完整User-Agent字符串。
方法二：点击右上角三个点图标 → 选择“编辑用户代理” → 粘贴目标UA，例如Pixel 8对应：Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.6422.113 Mobile Safari/537.36。【必须粘贴完整且无空格的User-Agent字符串，少一个字符都可能让服务器返回桌面版】
验证触摸事件与实时调试样式
第一步：观察页面右上角是否出现亮起的“Touch”图标，未亮起说明触摸事件未模拟，依赖touchstart的交互样式（如tap-highlight-color）将无法触发。
第二步：保持响应式设计模式开启 → 按F12打开完整开发者工具 → 切换到“检查器”（Inspector）标签页。
第三步：用鼠标悬停或点击页面元素，右侧实时显示该元素的盒模型与所有匹配CSS规则；双击任意CSS值（如font-size: 16px）即可编辑，回车确认，修改立即生效。
第四步：若需持久化修改，右键某条CSS规则 → “复制为CSS” → 粘贴到本地样式文件对应位置；【不要直接在开发者工具里点“保存”按钮——它仅保存到内存，关闭标签页即丢失】
