viewport meta 标签必须静态写死在 head 最上方，正确写法为，否则浏览器无法进入移动渲染模式，导致缩放错位、安全区失效及 rem 闪屏等问题。
必须在 顶部写对 <meta name="viewport">，否则整个页面会在手机上缩成一团、文字模糊、点击错位——这不是样式问题，是浏览器根本没进入移动渲染模式。
viewport meta 标签必须静态写死在 head 最上方
它不是可选配置，而是浏览器解析 HTML 时的“开关”。一旦晚于 CSS 或 JS 加载，或被动态插入，iOS Safari 和多数安卓 WebView 就会忽略，退化到默认 980px 宽度渲染再缩放。
- ✅ 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，且必须出现在所有<link>、<script></script>之前 - ❌ 错误做法：用 JS 动态
document.head.appendChild()添加；Vue/React 在客户端 hydrate 阶段才补；SSR 模板里漏掉 - ⚠️ 硬编码
width=375或width=414是典型错误——横屏时直接崩，折叠屏、模拟器下全失效
需要底部安全区适配？viewport-fit=cover 不可省略
iOS 底部 Home Indicator 会遮挡 position: fixed; bottom: 0 的导航栏，但只加 padding-bottom: env(safe-area-inset-bottom) 不起作用——因为 env() 默认返回 0，除非显式启用安全区视口。
- ✅ 必须同时写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - ❌ 写成
viewport-fit=contain或干脆不写，env(safe-area-inset-bottom)就永远是 0 - ⚠️
padding-bottom: env(safe-area-inset-bottom)要作用在固定定位的容器上（如.tab-bar），不能只设在或
rem 根字号必须内联 calc()，不能等 JS 执行
用 JS 在 DOMContentLoaded 里改 document.documentElement.style.fontSize，会导致用户肉眼可见文字先按默认 16px 渲染、再突然放大——这就是“闪屏”，尤其在低端安卓机上非常明显。
- ✅ 推荐做法：在
里内联<style></style>，例如：html { font-size: calc(100vw / 375 * 16px); }（假设设计稿宽 375px） - ⚠️ Safari iOS 12 及更早不支持
calc(100vw / 375 * 1rem)这种混用单位，必须统一用px - ❌ 别在
window.addEventListener('resize', ...)里反复重设——横竖屏切换后window.innerWidth可能滞后，造成字号抖动
最易被忽略的是：viewport 标签一旦写错，后续所有 CSS 布局、JS 逻辑、图片加载都建立在错误基础上。它不炫技，但必须最先、最准、最静态地落在 HTML 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
