纯CSS无法可靠防止双击缩放，必须组合viewport硬约束（width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0）+ JS拦截touchstart（多点）和touchend（双击）事件，并确保内容不溢出视口。
纯 CSS 无法可靠防止双击缩放——user-scalable=no 在 iOS 10.3+ 和多数现代安卓浏览器中已被忽略，touch-action: manipulation 只作用于单个元素且不拦截页面级双击，真正起效必须靠 viewport 参数组合 + JS 事件拦截。
viewport 必须写全 minimum-scale 和 maximum-scale
只写 user-scalable=no 已无效；iOS Safari 自 10.3 起视其为可访问性障碍而静默跳过。必须用硬约束代替提示：
-
minimum-scale=1.0和maximum-scale=1.0是目前最广泛被浏览器尊重的取值 - 必须搭配
width=device-width和initial-scale=1.0，否则部分 WebView（如旧版 UC）会直接忽略 scale 限制 - 不要加
minimum-scale=1.0后又设overflow: hidden在 body 上——横屏时 viewport 宽度变大但最小缩放锁死，内容会被裁切 -
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">必须静态写在最前位置，JS 动态插入完全无效
touch-action: manipulation 要加在按钮本身，不能靠父容器或伪元素
touch-action: manipulation 的作用是让浏览器跳过双击判断逻辑，但它只对设置了该样式的**真实可点击元素**生效：
- 正确写法：
button, [role="button"], .btn { touch-action: manipulation; } - 错误写法：
body { touch-action: manipulation; }—— iOS Safari 对 body 的双击仍会触发页面级缩放 - 伪元素（
::before/::after）上写这个属性毫无作用；扩热区也不能替代它 - 若父容器设了
touch-action: none，子元素的manipulation会被覆盖，需检查 computed styles
document.documentElement 上监听 touchstart 阻止多点触控
双指缩放本质是 touchstart 时 event.touches.length > 1，仅靠 viewport 或 CSS 无法拦截：
立即学习“前端免费学习笔记（深入）”；
- 必须绑定到
document.documentElement，而非body或按钮——否则 iframe、弹窗遮罩层等场景会漏掉 - 必须传
{ passive: false }，否则preventDefault()在 Chrome/Safari/Edge 中被静默忽略 - 示例代码：
document.documentElement.addEventListener("touchstart", function(event) { if (event.touches.length > 1) event.preventDefault(); }, { passive: false }); - 注意：此监听不能阻止双击放大（那是两次
touchend），需额外处理
双击放大必须用时间戳缓存 + touchend 拦截
iOS Safari 的双击放大不触发 dblclick，而是基于连续两次 touchend（间隔 ≤ 300ms）的原生手势：
- 监听
document.documentElement的touchend，缓存时间戳 - 第二次
touchend距离上次 ≤ 300ms 时调用event.preventDefault() - 同样需
{ passive: false }，否则无效 - 常见翻车点：事件绑在
body上，但body高度小于视口，导致事件未冒泡到document.documentElement
最易被忽略的是内容溢出：只要 document.documentElement.scrollHeight > window.innerHeight，iOS Safari 就会自动启用双指缩放以查看溢出区域，此时所有 viewport 设置都形同虚设——得先确保布局不撑高，再谈防缩放。
