Firefox移动端模式与网站交互差异咨询及Bug排查
你提到的这些观察很到位，Firefox的移动端模拟模式确实有不少容易被忽略的细节，我结合自己的调试经验补充几点你可能没注意到的差异，帮你进一步定位Bug：
触摸事件与鼠标事件的转换：桌面模式下鼠标操作触发的是
mouseover/mousedown等鼠标事件，但移动端模式会把所有鼠标操作转换成touchstart/touchmove/touchend触摸事件，同时还会模拟移动设备特有的300ms点击延迟（虽然现代浏览器大多优化了这个特性，但模拟模式会还原这个行为）。如果你的JS代码只处理了鼠标事件，或者依赖了触摸事件的特定属性（比如touches数组、clientX/Y的精度），就可能出现交互异常。视口与视觉视口的特殊处理：除了修改屏幕尺寸和像素密度，Firefox移动端模式会强制启用移动设备的视口规则——比如
window.innerWidth/innerHeight的计算会排除滚动条（移动设备滚动条是沉浸式的），而桌面端调整窗口大小时这些值会包含滚动条。另外，它会完整模拟visualViewportAPI的行为，包括虚拟键盘弹出时的视口高度压缩，这会额外触发resize或scroll事件，很多布局Bug都源于此。表单元素的交互与样式变化：移动端模式下，输入框、按钮、下拉选择器等表单元素会被替换成移动设备的默认样式，交互逻辑也会改变：比如输入框获得焦点时会模拟弹出虚拟键盘，下拉选择器会调用系统级的选择组件而非桌面原生下拉框。这些变化不仅会影响样式，还可能触发不同的事件（比如下拉选择器的
change事件触发时机不同）。响应式资源的重新评估：你注意到它会重新请求favicon，但其实不止——切换到移动端模式时，Firefox会重新解析页面中的响应式资源：比如
picture元素、带srcset属性的图片、CSS中的image-set()，会根据模拟的像素密度（2x/3x等）重新加载对应资源。如果你的资源加载逻辑依赖初始加载环境，切换后没有更新，就可能出现资源错误或布局错位。JavaScript环境的属性差异：除了User Agent，
navigator对象还有不少属性会被修改：比如navigator.maxTouchPoints会设为5（桌面端通常为0）、navigator.platform会模拟成移动设备平台（如"iPhone"或"Linux armv8l"）、window.orientation会有0/90/180/270的取值（桌面端为undefined）。另外，window.devicePixelRatio会被设置为对应移动设备的像素比，这会影响Canvas绘图、CSS像素与物理像素的转换逻辑。滚动行为的模拟差异：桌面端滚动依赖鼠标滚轮，而移动端模式模拟的是触摸滚动，包括弹性滚动、动量滚动，以及
overflow-scrolling: touch的效果。如果你的JS监听了scroll事件，并且依赖滚动速度、惯性等特性，会发现移动端模式下滚动事件的触发频率、回调时机和桌面端完全不同，容易导致逻辑出错。
调试小建议
你可以在Firefox开发者工具的控制台中直接输入console.log(navigator)、console.log(window.visualViewport)来查看这些属性的具体值，也可以在resize/touchstart/scroll等事件中添加日志，观察切换模式时哪些事件被触发、属性发生了哪些变化，这会帮你快速缩小Bug范围。
内容的提问来源于stack exchange，提问作者TryHarder
