Firefox for Android 下站点移动端菜单部分可见、显示异常问题

AI 小北

2026-10-3

问题根因与修复方案

1. 优先修复viewport语法错误

你当前使用的viewport标签存在明确语法错误：content属性中非法写入了shrink-to-fit=>，多余的>会导致Android Firefox解析viewport规则时直接截断后续配置，触发缩放逻辑异常。同时shrink-to-fit是iOS Safari专属属性，Android Firefox本身不识别该属性，不需要写入。

修正后的基础viewport可参考：

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=1.0, minimum-scale=0.86">

如果需要兼容iOS端，可加上正确的shrink-to-fit配置：

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=1.0, minimum-scale=0.86, shrink-to-fit=no">

2. 适配Android Firefox特有渲染规则

完成上述修改后如果问题仍存在，可依次排查以下适配点：

补充Firefox专属的文本缩放规则，避免字体自动放大导致菜单尺寸溢出：

* {
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

修正移动端菜单的视口高度取值：如果你的菜单使用100vh定义高度，Android Firefox计算vh时会包含系统状态栏/导航栏的高度，导致菜单实际高度超出可视区域，替换为100dvh即可适配动态视口高度。
调整fixed定位菜单的定位写法：将单独定义top/left/right/bottom的写法替换为inset: 0，避免Firefox对边距的计算偏差导致菜单偏移遮挡汉堡按钮。
可临时添加user-scalable=no到viewport配置中，确认是否是缩放规则失控导致的显示异常，验证问题后再根据业务需求决定是否保留该配置。