meta name="viewport" 是移动端屏幕适配的启动开关，必须置于<head>最前；width=device-width与initial-scale=1.0需成对使用，user-scalable=no违反可访问性标准。
meta name="viewport" 不是“和屏幕适配有关系”，它就是屏幕适配的启动开关——没它，后续所有 CSS 媒体查询、rem 计算、vw 单位、Flex/Grid 布局，全都会在移动端失效或错位。
meta name="viewport" 为什么必须放在 <head> 最前面
- 浏览器解析 HTML 是从上到下流式进行的；一旦开始渲染，再插入视口标签已来不及修正初始布局视口（layout viewport）。
- 移动端默认 layout viewport 宽度是 980px（iPhone Safari）、1024px（部分 Android），远大于物理屏幕；不加
meta name="viewport"，浏览器就按这个“假宽度”计算100%、max-width: 1200px等，导致内容被压缩、文字极小、需双指放大才能阅读。 - 若该标签被 JS 动态插入，或位于 CSS/JS 引用之后，可能触发重排（reflow）甚至强制刷新布局，造成闪屏或白屏。
width=device-width 和 initial-scale=1.0 必须成对出现
- 单独写
width=device-width：某些 Android 浏览器会将 layout viewport 设为设备宽度，但视觉视口（visual viewport）仍可能因 DPR 或历史行为缩放，导致字体模糊或点击区域偏移。 - 单独写
initial-scale=1.0：不指定 width 时，浏览器仍按默认 980px 解析，此时 scale=1 只是“把 980px 内容等比显示在小屏幕上”，结果仍是缩小版桌面页。 - 正确组合：
width=device-width, initial-scale=1.0才能确保：- layout viewport 宽度 = 设备逻辑像素宽度（如 iPhone 13 的 390 CSS px）
- visual viewport 初始大小与 layout viewport 对齐
- CSS 中的
1px、1rem、1vw都基于真实设备宽度运算
user-scalable=no 是可访问性雷区，慎用
- 表面看它能防止用户误操作缩放、保持 UI 一致性，但实际后果严重：
- 违反 WCAG 2.1 标准中“文本可缩放到 200% 且不丢失功能”的强制要求
- iOS VoiceOver、Android TalkBack 等读屏软件依赖缩放调整可读性，禁用后直接拒斥视障用户
- iOS 13+ 已部分忽略
user-scalable=no，但 Android WebView 仍会响应，造成平台行为不一致
- 替代方案更可靠：
- 用
maximum-scale=2.0, minimum-scale=0.5限定缩放范围 - 保证所有交互元素最小尺寸 ≥ 44×44px（CSS px），避免缩放后点不准
- 文字容器使用
min-height+line-height防止缩放后行高塌陷
- 用
meta name="viewport" 看似只是一行标签，但它锁定了整个页面的坐标系起点。很多开发者调了一整天 rem 换算或媒体查询断点，最后发现只是这行漏了、写错了位置、或者被构建工具自动删掉了——这种低级但高频的问题，往往卡在最开头。
