viewport meta 标签必须置于 之后、 之前，且仅能有一条；content 仅支持 width=device-width, initial-scale=1，否则响应式失效、媒体查询不触发、字体缩放异常。
没写对 <meta name="viewport">，响应式就等于没做——浏览器会按 980px 宽度渲染，@media 规则全失效，字体小得看不清，用户得双指放大才能点按钮。
viewport meta 标签必须放在 最前面
它得在 <meta charset="UTF-8"> 之后、<title></title> 之前，且绝对不能塞进 或靠后位置。iOS Safari 解析到这行才开始按设备宽度布局；如果晚了，首屏已经按默认视口渲染完毕，再插入也白搭，还会触发缩放抖动。
- 错误做法：
<meta name="viewport" content="...">（完全无效） - 错误做法：用 JS 动态插入
document.head.appendChild(...)（iOS 不识别） - 错误做法：被构建工具（如 Vite 插件）或 SSR 框架（如 Next.js）静默覆盖——务必查渲染后的 HTML 源码确认最终只有一条且位置正确
content 属性只写 width=device-width, initial-scale=1
这是最小可用配置，也是唯一推荐的上线写法。漏掉 initial-scale=1，某些老版本 iOS 仍 fallback 到 980px；写成 width=375 这类固定值，会在 iPad 或折叠屏上强制缩放或横向滚动。
- 别加
user-scalable=no：WCAG 2.1 明确要求用户能缩放到 400%，iOS 16+ 已部分忽略该设置 - 别加
maximum-scale=1.0：等效于禁用缩放，双击放大失效，损害可访问性 - 别混用
minimum-scale和maximum-scale：参数冲突时行为不可控，Chrome Android 12+ 会静默丢弃整条 meta（含非法空格或中文逗号）
为什么写了还是不生效？先检查这三处
常见现象不是“没写”，而是“写了但被覆盖/解析失败”。重点排查：
立即学习“前端免费学习笔记（深入）”；
- HTML 中存在多个
<meta name="viewport">标签——后出现的会覆盖前面的，哪怕只是空格差异 -
content值里用了全角逗号、中文引号或多余空格，比如content="width=device-width ， initial-scale=1" - CMS 或前端框架自动生成了 viewport 标签，你手写的那条实际没进最终 HTML（打开 DevTools → 右键“查看网页源代码”确认）
真正容易被忽略的是：viewport 不是“让页面变小”，而是让 CSS 像素和设备逻辑像素对齐——这个对齐一旦错位，后续所有 rem、vw、媒体查询都会漂移。别指望调试工具里的模拟尺寸能完全还原真实设备表现，真机连上 DevTools 实时测 document.documentElement.clientWidth 才算数。
