必须写<meta name="viewport" content="width=device-width, initial-scale=1.0">，它是移动端渲染开关；硬写width=375会导致跨设备布局错乱，缺失initial-scale=1.0则字体模糊、点击偏移、媒体查询失效。
没写 <meta name="viewport">，页面在手机上基本就是废的——不是缩成一团，就是文字糊成一片，点不到按钮。它不是可选项，是渲染开关。
为什么 width=device-width 不能写死成 width=375
设备逻辑像素宽度不是固定值：iPhone 15 是 393px，老款 iPhone SE 是 375px，Pixel 8 是 412px，折叠屏展开后可能超 800px。硬编码 width=375 会导致：
- 在更宽设备上内容被强制压缩，布局错乱、文字挤在一起
- 在更窄设备（如部分安卓小屏）上横向滚动条出现
- CSS 中
100vw不再等于屏幕实际可用宽度，媒体查询断点失效
必须用 width=device-width，让浏览器动态读取当前设备的 CSS 像素宽度。
initial-scale=1.0 缺失时字体为什么会模糊
不设 initial-scale=1.0，iOS Safari 默认以 980px 宽度渲染，然后自动缩放到视觉适配尺寸（比如缩放 0.38 倍）。这时：
立即学习“前端免费学习笔记（深入）”；
- CSS 像素和物理像素不再对齐，1px 可能对应 2~3 个物理像素，但渲染器做了插值，字体边缘发虚
- 触摸事件坐标映射错位，
click和touchstart的触发点偏移 - Canvas 或 WebGL 渲染比例异常，图形拉伸或锯齿加重
加上 initial-scale=1.0 后，CSS 像素才真正“落地”为设备独立像素（DIP），高 DPR 屏幕才能正确倍率绘制。
user-scalable=no 在什么场景下真该用
禁止缩放不是为了“控制体验”，而是解决特定交互冲突：
- 地图类应用：双指缩放由 JS 控制，浏览器原生缩放会干扰手势识别
- 绘图白板页：笔迹坐标系依赖固定视口，缩放后 canvas 坐标映射完全失效
- AR/VR Web 页面：WebGL 渲染帧率与视口尺寸强耦合，缩放引发重排重绘抖动
但要注意：user-scalable=no 必须搭配 maximum-scale=1.0, minimum-scale=1.0，否则部分 Android 浏览器仍可缩放；且 WCAG 要求提供替代文本缩放方案（如通过 rem 动态调整根字号）。
viewport 标签位置和加载顺序影响渲染
它必须出现在 <head> 最顶部，且早于所有 CSS 和 JS：
- 如果放在 CSS
<link>后面，浏览器先按默认 980px 渲染样式，再解析 viewport，触发一次重排（FOUC） - 若被 JS 动态插入（比如通过
document.write），iOS Safari 可能完全忽略 - 服务端渲染时，确保它不在模板片段里被条件编译掉——哪怕只在 desktop 模板里漏写，移动端也会 fallback 到桌面模式
最保险写法：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 紧贴 <head> 开始，前面只有 <meta charset="UTF-8">。
viewport 不是“写了就完事”的配置项，它是整个移动端渲染链路的第一环。漏掉一个等号、多一个空格、放错位置，后面所有 rem、flex、media query 都可能失效——问题往往不出在代码逻辑，而出在浏览器根本没按你预期的方式开始渲染。
