必须启用响应式设计模式并选择真实机型：按ctrl+shift+m（win/linux）或cmd+opt+m（macos）打开，选iphone 14等机型同步视口、dpr和ua，确认右上角“touch”图标亮起，再在inspector中实时编辑css验证效果。
要在火狐浏览器中真实还原移动端页面的渲染效果，必须进入响应式设计模式并正确配置设备参数——仅靠缩放窗口或手动调整宽度，无法触发视口重排、设备像素比计算和触摸事件相关样式，会导致 rem 单位错乱、@media 查询不生效、:hover 伪类残留等问题。
启动响应式设计模式
按下 Ctrl + Shift + M（Windows/Linux）或 Cmd + Opt + M（macOS），直接激活响应式设计模式。这一步不能用鼠标点菜单替代，某些语言包缺失的版本里，“更多工具→Web 开发者→响应式设计模式”路径会不可见。
若快捷键无效，可点击右上角 ≡ → “更多工具” → “Web 开发者” → “响应式设计模式”。注意：必须在已打开目标网页后操作，否则设备下拉框为空、工具栏不加载任何设备信息。
选择真实机型并验证渲染上下文
在左上角设备下拉框中，选择 iPhone 14 或 Pixel 5 等预设真实机型。选中后，火狐会同步设置三要素：视口宽度 + 设备像素比（DPR）+ 匹配的 User-Agent 字符串——缺一不可。
只调尺寸不改 DPR 会导致 1px 边框在高分屏上显示为 2px；不换 UA 则 JavaScript 中检测 mobile 的逻辑可能跳过关键样式块，比如隐藏 PC 导航栏的 CSS 类不会被添加。
观察页面右上角是否出现亮起的 “Touch”图标。未亮起说明触摸事件未模拟，依赖 touchstart 的交互样式（如 tap-highlight-color、active 状态）将无法触发，调试结果不可信。
实时编辑与保存移动端样式
方法一：在 Inspector 面板中直接双击 CSS 规则值（如 background-color、margin、font-size）进行修改，页面实时响应变化。
方法二：点击右上角 “{}” 图标 打开“编辑器”面板，在底部输入自定义 CSS 片段，按 Ctrl+Enter（或 Cmd+Enter）即时注入并生效。注意：此处编辑的内容仅当前会话有效，刷新即丢失。
方法三：若需长期保留修改，右键目标元素 → “Edit as HTML” → 在弹出的编辑框中直接写入 style 属性，例如：style="color:red; font-size:14px;"。这种内联样式优先级最高，能绕过外部 CSS 文件干扰，适合快速验证样式冲突。
