Firefox 默认禁用 viewport 元标签解析，需手动启用 dom.meta-viewport.enabled 首选项才能使 等响应式设置生效。
firefox 默认禁用 viewport 元标签解析，需手动启用 `dom.meta-viewport.enabled` 首选项才能使 `` 等响应式设置生效。
Firefox 对 的支持与 Chrome、Safari 等浏览器存在关键差异：它默认不解析该标签，即使 HTML 中正确声明，开发者工具中也看不到任何效果，响应式调试（如 DevTools 的设备模拟模式）完全忽略 width=device-width、initial-scale、maximum-scale 等所有属性。
这是因为 Firefox 将 viewport 元标签视为非标准遗留行为，其支持被默认关闭。要恢复兼容性，必须显式启用对应内部首选项：
✅ 解决步骤（Firefox 115+，包括最新 ESR 版本）
- 在地址栏输入 about:config 并回车，点击「接受风险并继续」；
- 在搜索框中输入 dom.meta-viewport.enabled；
- 双击该布尔型首选项，将其值由 false 改为 true；
- 刷新页面或重启浏览器，viewport 元标签即刻生效。
? 提示：此设置仅影响当前 Firefox 配置文件，多用户环境或企业部署中可通过 policies.json 启用（适用于 Firefox ESR 管理场景）。
示例验证代码
确保你的 HTML 包含标准 viewport 声明：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<title>Viewport 测试页</title>
<style>
body { margin: 0; font-size: 16px; }
@media (max-width: 480px) {
body { background: #e0f7fa; }
}
</style>
</head>
<body>
<h1>请切换至响应式设计模式（Ctrl+Shift+M）测试</h1>
<p>若背景变青色且文字未缩放异常，则 viewport 已生效。</p>
</body>
</html>⚠️ 注意事项
- 此问题不影响生产环境真实移动设备访问（Firefox for Android 完全支持 viewport）；
- 桌面版 Firefox 的 viewport 解析仅用于开发调试，上线网站无需依赖此设置；
- 不建议通过 JavaScript 动态注入 viewport meta 标签——Firefox 同样不识别运行时插入的该标签；
- 若启用后仍无效，请检查是否启用了隐私浏览模式（部分首选项在隐私窗口中受限）或存在扩展干扰（如 uBlock Origin 的某些过滤规则可能误删 meta 标签）。
启用 dom.meta-viewport.enabled 是目前唯一稳定、官方支持的解决方案。它让桌面版 Firefox 的开发体验与其他现代浏览器对齐，确保响应式布局调试的一致性与可靠性。
