viewport必须位于HTML最开头，否则弹性布局失效；width=device-width和initial-scale=1.0必须成对出现，缺一不可；禁止user-scalable=no，避免横屏、键盘弹出时布局异常。
viewport 必须在 最开头，否则弹性布局会失效
浏览器一解析到 <meta name="viewport"> 就立刻应用规则；如果它被 <script>、内联 <style> 或 SSR 注释挤到后面，首屏会先按默认 980px 渲染，再缩放——此时 rem、%、vw 都已基于错误宽度计算完毕，布局直接错位。
常见翻车点：
-
<meta charset>后紧跟注释或空格，导致 viewport 被“顶”出第一位置 - 用 JS 动态创建并
append到<head>，完全不生效（浏览器早跑完了） - 误写在
<body>里，Chrome 和 Safari 都忽略
width=device-width 和 initial-scale=1.0 缺一不可，否则 rem/vw 计算全乱
只写 width=device-width 时，iOS Safari 可能仍按 1.25 倍放大渲染，document.documentElement.clientWidth 返回值不稳定，JS 动态设 font-size 或 CSS calc(100vw / 375 * 16px) 全部失准。
必须成对出现：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width：让布局视口宽度 = 物理设备宽度（不是像素数，是 CSS px 单位） -
initial-scale=1.0：锁定初始缩放为 1:1，确保后续所有弹性单位有统一基准
别写 width=375 这类固定值——横屏时直接崩，安卓部分 WebView 会无视。
rem 和 vw 的适配逻辑不同，混用前得先确认 viewport 是否撑开正确
rem 依赖 html 根元素的 font-size，而这个值通常由 viewport 宽度驱动；vw 直接基于视口宽度，但小屏下易过小。两者都要求 viewport 已正确生效，否则：
-
rem：若html { font-size: 62.5% }硬编码且没配合 JS 或 calc() 动态调整，在 iPhone 3x 屏上文字糊成一片 -
vw：若 viewport 没设initial-scale=1.0，100vw可能是 980px 而非 390px，背景图直接拉伸变形
推荐做法：
- 简单项目：用
calc(100vw / 375 * 16px)内联 style，避免 JS 闪屏 - 大屏看板：用
vw+@media (min-width: 414px) { font-size: 17.6px; }兜底最小字号
禁止 user-scalable=no，否则弹性布局在横屏/键盘弹出时行为异常
加了 user-scalable=no 表面看“锁死了”，实际埋雷：
- iOS Safari 横屏切换时不触发
resize事件，JS 更新html.font-size会卡在旧值 - 安卓部分定制浏览器（如华为 EMUI）无视
maximum-scale却执行user-scalable=no，用户无法放大查看 - 键盘弹出时，
visualViewport.height缩小，但 viewport 被锁死，vh单位不再响应真实可视区域
真正需要“锁死”的场景极少（Kiosk、车载 H5），日常项目建议去掉这两项，靠 CSS 弹性单位本身守住布局。
viewport 不是开关，而是弹性布局的起点——它一旦错位，后面所有 rem、vw、% 都在错误画布上作图，越调越偏。
