viewport meta标签必须唯一且位于head内，content中user-scalable应省略以允许缩放，width=device-width与initial-scale=1.0须成对使用，避免第三方SDK覆盖。
viewport meta标签必须写在里，且不能重复
浏览器只读取第一个 <meta name="viewport">，后续同名标签会被忽略。如果页面由多个模板拼接（比如CMS或微前端），容易意外注入多个 viewport 标签，导致行为不可预期——最常见的是缩放失效或双倍渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查最终 HTML 源码（不是开发者工具渲染后的 DOM），确认
<meta name="viewport">仅出现一次，且位于<head>最早可插入位置 - 避免 JS 动态写入 viewport meta，它不触发重排，但可能被忽略或覆盖
- 服务端渲染时注意模板继承逻辑，防止 layout 和 page 层都写了一份
content属性值不能省略user-scalable，否则iOS Safari会禁用双指缩放
iOS Safari 对 user-scalable=no 极其敏感：只要 content 中显式写了 user-scalable=no 或 user-scalable=0，哪怕同时写了 maximum-scale=1.0，也会彻底禁用双指缩放（包括放大查看文字）。而很多“适配方案”错误地把它当成防误触手段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如需允许用户缩放（推荐），直接省略
user-scalable—— 它默认就是yes - 如确需禁用（例如 Kiosk 模式），改用
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0，三者缺一不可 - 不要写
user-scalable=0，Safari 不识别该值，会降级为yes，造成预期外的缩放
initial-scale=1.0 并不总等于“100%设备宽度”，要配合width=device-width
initial-scale=1.0 的实际效果取决于 width 值。如果只写 initial-scale=1.0 而没写 width=device-width，Android Chrome 会按桌面视口（通常 980px）缩放，结果是页面整体缩小、文字变小；iOS Safari 则可能回退到 auto width，行为不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须成对使用：
width=device-width, initial-scale=1.0 - 避免
width=375这类固定值，它在非 375px 宽屏手机上会强制拉伸或留白 - 如果项目需兼容 UC 浏览器旧版本，可加
target-densitydpi=device-dpi（仅 Android 4.3 及以下有效，现代项目可忽略）
第三方SDK或广告代码可能覆盖viewport设置
某些统计 SDK、信息流广告 JS 或微信 JSSDK 初始化脚本，会在运行时重写 <meta name="viewport">。现象是：本地测试正常，上线后突然无法缩放或页面横向滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelector('meta[name="viewport"]')在控制台实时检查 content 值是否被篡改 - 在
window.onload后延迟 100ms 重新写入 viewport（仅应急，治标不治本） - 优先联系 SDK 提供方确认其 viewport 行为，部分 SDK 提供
disableViewportAdjustment配置项
width=device-width 锚定基准，initial-scale=1.0 锚定比例。其余参数都是边界控制，一旦加了 user-scalable=no 就得同步锁死 min/max，不然 iOS 会自己补全逻辑，结果往往和你想的不一样。 
