必须置于最开头，标准配置为content="width=device-width, initial-scale=1"；漏写或错写会导致移动端按980px渲染、媒体查询失效、字体错乱及点击延迟，且配套需禁用硬编码宽高、图片加max-width:100%、合理设置媒体查询断点。
不加 <meta name="viewport">，所有响应式手段都白搭——它不是可选配置，而是移动端渲染的启动开关。
viewport meta 标签必须写在哪、怎么写才生效
浏览器一解析到 <meta name="viewport"> 就立刻应用视口策略，晚了就已按默认 980px 渲染完首屏，再改会触发缩放抖动甚至重排。
- 必须放在
最开头，不能被 SSR 注释、框架占位符或其它<meta>挤到后面 - 不能动态插入（比如用
document.write或setAttribute在 DOMContentLoaded 后补） - 最低可用标准配置就是：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 漏掉
initial-scale=1，老版本 iOS Safari 可能忽略缩放逻辑，文字小得看不清
为什么 user-scalable=no 和 maximum-scale=1 是危险操作
它们表面“稳”，实则直接破坏可访问性，且在现代 iOS 中行为不可靠。
- 视力障碍用户无法放大阅读，系统级「更大字体」设置被绕过
- iOS 13+ 部分版本双击放大手势失效；Web App 添加到主屏后，
maximum-scale被强制忽略，但user-scalable=no仍锁死手势 - WCAG 2.1 明确要求保留用户缩放控制权
- 真要限制范围，用
minimum-scale=0.5, maximum-scale=2.0，并配真机测试
viewport 写对了但页面还是错乱？检查这三个配套点
<meta name="viewport"> 只管“画布怎么铺开”，不解决布局、字体、图片的具体适配。翻车基本都出在这儿：
- CSS 里写了
width: 375px或font-size: 16px这类硬编码——该用%、rem、vw的地方没换 - 图片没加
max-width: 100%; height: auto;，直接撑爆容器引发横向滚动 - 媒体查询用了
@media (max-width: 767px)却没在大屏样式里重置display或flex-direction，导致小屏规则残留覆盖 - 断点照搬别人家的
768px/1024px，实际内容在640px就已挤不开
最常被忽略的是：viewport 设置生效的前提，是整个 CSS 布局体系放弃固定像素思维。哪怕 width=device-width 写得再准，只要一个 div { width: 400px } 横在那儿，响应式就从根上断了。
