user-scalable=no 失效因iOS 10.3+将其视为可访问性障碍而强制绕过，Android Chrome也弱化支持；内容溢出视口时iOS自动启用双指缩放，且动态插入meta无效。
viewport 中写 user-scalable=no 为什么经常失效
它确实曾是主流方案，但现在失效有明确原因：iOS Safari 自 10.3 起将 user-scalable=no 视为可访问性障碍，强制绕过；即使控制台不报错，双指缩放仍能触发。Android Chrome 和新版 WebView 也逐步弱化支持，行为越来越不可控。
更关键的是：当页面内容高度超出视口（document.documentElement.scrollHeight > window.innerHeight），iOS 会自动启用双指缩放以查看溢出区域，此时 user-scalable=no 彻底无效。
常见错误包括：
-
user-scalable=0或user-scalable=false不在标准中，各浏览器行为不一致 -
<meta>被 JS 动态插入 —— 浏览器解析完 HTML 就已锁定视口策略，动态写入完全无效 - 父页面用
<iframe>嵌入时未加sandbox="allow-scripts allow-same-origin"，WKWebView 可能忽略子页 viewport
minimum-scale=1.0 和 maximum-scale=1.0 组合是否真能起效
这是目前最广泛兼容且被浏览器真正尊重的取值，比单写 user-scalable=no 更稳妥。但必须满足前提条件，否则参数会被忽略：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width必须存在，否则 scale 类参数可能不生效 -
initial-scale=1.0必须显式声明，否则某些安卓机首次加载时可能意外缩放 - 不要省略
minimum-scale—— 仅设maximum-scale=1.0无法阻止用户缩小页面
正确写法示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
为什么 touch-action: manipulation 不能替代 viewport 设置
touch-action: manipulation 是细粒度补充手段，不是全局禁用方案。它只对加了该样式的元素生效，比如按钮或卡片区域：
- 写法：
button, .interactive-card { touch-action: manipulation; } - 作用：告诉浏览器“这个区域只处理点击/轻触，别响应双击缩放”，但不影响页面其他区域
- 兼容性：Safari 13.1+ 才支持，iOS 13.4 前还需配合
-webkit-touch-callout: none - 注意：若父容器设了
touch-action: none，子元素的manipulation会被继承覆盖
它不能防止用户在空白区域、文本段落或 <body> 上双指缩放 —— 这些地方仍需 viewport + JS 拦截兜底。
JS 拦截多点触控时 { passive: false } 为什么不能省略
现代浏览器默认将 touch 事件监听器设为 passive，意味着 event.preventDefault() 在其中会被静默忽略。不加 { passive: false }，拦截就形同虚设：
- 双指缩放本质是
touchstart时event.touches.length > 1，需在document.documentElement上监听并立即preventDefault() - 双击放大由连续两次
touchend（间隔 ≤ 300ms）触发，需缓存时间戳并拦截第二次 - 切勿全局拦截
touchmove—— 这会直接废掉页面滚动，iOS 下甚至触发静默卡死
关键代码片段：document.documentElement.addEventListener("touchstart", function(event) { if (event.touches.length > 1) event.preventDefault(); }, { passive: false });
真正可靠的方案从来不是单点防御：viewport 参数组合是基础，touch-action 是局部优化，JS 拦截是运行时兜底。三者缺一不可，而最容易被忽略的是——所有这些都必须在真实设备上验证，开发工具里的模拟缩放毫无参考价值。
