viewport meta 标签必须放在 <head> 最开头且内容为 width=device-width, initial-scale=1 才生效，否则 iOS Safari 会默认按 980px 渲染导致抖动、媒体查询失效；禁用缩放违反可访问性规范。
viewport meta 标签必须写在哪才生效
必须放在 <head> 最开头，不能被 SSR 注释、框架占位符或其它 <meta> 挤到后面。浏览器一解析到它就立刻应用视口策略，晚了就已按默认 980px 渲染完首屏——此时再补，iOS Safari 会抖动重排，媒体查询也失效。
常见错误包括：
- 动态用
document.write或setAttribute在DOMContentLoaded后插入（iOS 完全不认） - 写在
<body>里（无效） - CMS 或框架自动生成了第二个
<meta name="viewport">，导致第一个被覆盖（只认首个）
content 属性里哪些参数是必需的
最低可用标准配置就是：width=device-width, initial-scale=1。缺一不可。
width=device-width 告诉浏览器把 layout width 设为设备的 CSS 像素宽度（比如 iPhone 14 是 390px）；initial-scale=1 确保初始缩放为 1:1，否则老 iOS Safari 可能 fallback 到 980px 渲染，文字小得看不清。
立即学习“前端免费学习笔记（深入）”；
别写这些：
-
width=375或width=1024—— 硬编码宽，在非对应设备上必然横向滚动或裁剪 - 单独写
initial-scale=1而不配width=device-width—— 大概率被忽略 -
height=device-height—— 几乎无实际作用，还可能干扰某些 Android WebView
user-scalable=no 和 maximum-scale=1 为什么危险
它们表面“防乱缩”，实则直接破坏可访问性：禁用双指缩放、长按放大、iOS「更大字体」系统设置，WCAG 明确视为违规。苹果官方已不推荐，iOS 16+ 更是部分忽略该设置。
更现实的问题是：加了 user-scalable=no，用户根本没法放大查看小字内容，客服投诉率明显上升；而 maximum-scale=1 单独存在时，若页面内容溢出（比如未重置的 min-width 或 white-space: nowrap），浏览器仍会强制缩小——你写的限制根本没生效。
为什么写了 viewport 页面还是宽出屏幕
大概率不是 <meta> 写错了，而是页面内容本身撑开了布局。比如一个 div 设了 width: 1200px，或某个 table 没加 table-layout: fixed，又或者 img 缺少 max-width: 100%。
验证方法很简单：用 Chrome DevTools 的「Toggle device toolbar」截图，看真实渲染宽度是否等于设备 CSS 像素宽（如 390px）。别只信 CSS 声明——document.documentElement.clientWidth 返回的是 layout width，可能和 media query 结果不一致。
真正起效的组合永远只有两个硬条件：<head> 最开头 + content="width=device-width, initial-scale=1"。其余都是锦上添花，甚至画蛇添足。
