viewport meta标签必须置于head最开头，否则浏览器按默认980px渲染首屏再修改会触发缩放抖动；标准配置仅用width=device-width和initial-scale=1.0，禁用缩放违反无障碍标准。
viewport meta 必须写在 head 最开头，否则媒体查询全失效
浏览器解析到 <meta name="viewport"> 就立刻应用视口规则，晚了会按默认 980px 渲染完首屏，再改就触发缩放抖动甚至重排。常见翻车点包括：
- 被 SSR 框架注入的注释或占位符挤到
<meta charset>后面 - 动态插入（比如用 JS 创建并 append），完全不生效
- 误写在
里，Chrome 和 Safari 都忽略
验证是否生效：真机或 Chrome DevTools 切 iPhone 模拟器后，在 Elements 面板看 元素的 clientWidth —— iPhone 13 应接近 390，不是 980。
标准配置只用 width=device-width 和 initial-scale=1.0
这两个参数是底线，缺一不可：
-
width=device-width告诉浏览器“别按桌面宽度渲染”，否则 iOS Safari 和安卓 WebView 都 fallback 到 980px，文字小得看不清 -
initial-scale=1.0显式声明初始缩放，老版本 iOS（如 iOS 9）只写width=device-width时仍可能忽略缩放逻辑 - 别写
width=375或width=1200这类固定值——设备一换就横向滚动或留白
最低可用配置就是：<meta name="viewport" content="width=device-width, initial-scale=1.0">
maximum-scale=1.0 和 user-scalable=no 是可访问性雷区
它们看似“稳”，实则直接破坏基础可用性：
- 视力障碍用户无法放大阅读，系统级「更大字体」设置被绕过
- iOS 13+ 中部分版本双击放大手势失效
- Web App 添加到主屏后，iOS 强制忽略
maximum-scale，但user-scalable=no仍锁死所有手势 - 真需要限制范围？可用
minimum-scale=0.5, maximum-scale=2.0，但务必搭配真实机型测试
WCAG 2.1 明确要求支持用户缩放，禁用即不符合无障碍标准。
HTML 骨架里 viewport 不是孤立存在，要配齐三要素
<meta name="viewport"> 只管“画布怎么铺开”，布局、字体、图片适配还得靠配套：
- CSS 里禁用硬编码尺寸：删掉
width: 375px、font-size: 16px，该用%、rem、vw的地方必须换 - 图片加
max-width: 100%; height: auto;，否则撑爆容器引发横向滚动 - 媒体查询断点按内容临界点设，不是抄设备参数：比如两列卡片在 783px 开始重叠，就该用
@media (max-width: 782px)，而非硬套 768
最常被忽略的是：viewport 写对了，但 或 上写了 font-size: 62.5% 却没配合 rem 计算，导致所有 rem 值错乱——这种问题只在真机 DPR > 1 时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
