现代移动端浏览器已系统级忽略user-scalable=no，真正起效的是initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0三者组合；viewport必须静态写在head最前，且内容溢出会绕过所有设置。
现代移动端浏览器（iOS 10+、Chrome 90+、Safari 15.4+）已系统级忽略 user-scalable=no，单靠 Meta 标签无法真正禁用缩放——这不是写法错误，而是浏览器为保障可访问性主动放弃执行。
viewport meta 标签必须静态写在 head 最前，且参数绑定生效
它不是“指令”，而是向浏览器声明渲染意图；晚了或位置错，页面可能已按默认 980px 渲染并缩放一次，不可逆。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是最简可靠起点，二者缺一不可：只写initial-scale=1.0，浏览器仍用 980px 视口再强行缩放；只写width=device-width，则无锚点，缩放比例失控 - 必须放在
中，紧贴<title></title>后；放进或由 JS 动态插入（如document.head.appendChild()）完全无效 - 多个同名
name="viewport"标签时，仅第一个被解析，其余丢弃；CMS、框架 SSR 模板中需检查源码是否真有且唯一
maximum-scale=1.0 和 minimum-scale=1.0 才是实际起效的缩放锁
user-scalable=no 在 iOS 13.4+ 起已被 Safari 视为废弃提示，而 maximum-scale=1.0 与 minimum-scale=1.0 组合才是 Safari 实际响应的“硬限制”条件。
- 三者需同时存在：
initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0；iOS 15.4+ 更严格，缺任一即失效 -
user-scalable=no或user-scalable=0效果等价，但仅作为兼容旧安卓 WebView 的补充，不能替代 scale 限制 - Chrome 110+ 开始校验完整性：缺失
minimum-scale或maximum-scale会导致user-scalable=no被静默忽略
内容溢出会直接绕过所有 viewport 设置
iOS Safari 明确优先保障“用户能看清”，只要 document.documentElement.scrollHeight > window.innerHeight 或存在宽容器（如 min-width: 1200px、未换行的长文本），就会无视 maximum-scale=1.0，强制启用双指缩放。
- 常见溢出源：
white-space: nowrap的 JSON 字符串、浮动未清除、flex子项未设flex-shrink: 1、卡片容器漏加overflow: hidden - 测试不能只信 DevTools 的 computed 值，要用真机截全屏图，或 Chrome 的「Capture screenshot」看实际渲染宽度
- 临时缓解加
html, body { height: 100%; overflow: hidden; }会锁死滚动，轮播、弹窗、列表全部失效，不推荐
JS 拦截 touchstart/gesturestart 是唯一实操兜底方案
当 viewport 失效时，只能从手势源头阻断——但必须注意事件监听目标、被动模式和拦截时机。
- 监听目标必须是
document.documentElement（不是body），避免 iframe 或子容器干扰 - 双指缩放本质是
touchstart时event.touches.length > 1，需调用event.preventDefault()，且必须传{ passive: false }，否则 Safari/Chrome 静默忽略 - 双击放大需缓存
lastTouchEnd时间戳，两次touchend间隔 ≤ 300ms 时拦截，否则误杀正常点击 - iOS Safari 特有
gesturestart事件比touchstart更早触发，拦截更彻底，建议一并监听
真正卡住缩放问题的，往往不是 viewport 写得不对，而是 CSS 里某个没重置的 min-width、一行没换行的字符串、或者一个忘了加 overflow: hidden 的卡片容器——这些细节在模拟器里看不出来，只有真机截全屏图才能暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
