viewport标签必须硬编码在HTML的最顶部，内容仅限width=device-width, initial-scale=1.0，否则Lighthouse移动端得分归零且损害可访问性。
viewport 标签写错，页面在手机上就不可能“友好”——不是加载慢的问题，是根本没进对门。
viewport 必须放
很多静态页用 JS 动态插入 <meta name="viewport">，结果页面先以桌面宽度（通常是 980px）渲染一帧，再重排。搜索引擎抓取首屏时已判定为“非移动友好”，Lighthouse 直接扣分；用户看到的是瞬间缩放，文字模糊、按钮错位。
- 必须硬编码在 HTML 的
最顶部，早于任何 CSS 或 JS - 禁止用
document.write()或appendChild()动态添加 - 服务端渲染（SSR）或静态生成（SSG）场景下，确保该标签在初始 HTML 字符串中就存在
content 属性只保留 width=device-width, initial-scale=1.0
加 user-scalable=no 或 maximum-scale=1.0 看似“防崩”，实则埋雷：iOS Safari 在双击放大后无法恢复、视力障碍用户无法缩放阅读、部分 Android 浏览器会忽略整个 viewport 声明。
- 标准且安全的写法只有：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
width=device-width让视口宽度跟随设备物理宽度，避免默认 980px 模式 -
initial-scale=1.0确保不缩放，但允许用户后续操作（符合 WCAG 1.4.4 缩放要求） - 删掉所有
minimum-scale、maximum-scale、user-scalable—— 它们不是性能优化，是可访问性风险
viewport 错误直接导致 Lighthouse 移动端得分归零
Lighthouse 的 “Mobile Friendly” 检查项第一条就是验证 viewport 是否存在且合法。一旦缺失或参数非法（如 width=1024），整项得分为 0，且影响“SEO”大类评分。这不是警告，是硬性失败。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<meta name="viewport" content="width=1024">→ 视口被锁死为 1024px，在 iPhone 上内容严重横向溢出 - 错误示例：
<meta name="viewport" content="width=device-width">→ 缺少initial-scale=1.0，iOS Safari 会自动缩放，文字发虚 - 检查方法：打开 Chrome DevTools → Lighthouse → 运行移动端报告 → 查看 “Configure the viewport” 项
真正卡住性能的，往往不是 JS 打包体积，而是 viewport 这一行没写对——它让整个渲染流水线从第一步就走偏了。别跳过这行，也别给它加“保险”。
