禁用双击缩放需viewport限制、touch事件拦截、gesture事件阻断三者协同：viewport设initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0、user-scalable=no；touchstart检测多点触控并preventDefault，touchend时间戳防双击；gesturestart监听并阻止；滚动容器需设touch-action: pan-y且body overflow:hidden。
直接禁用双击缩放不能只靠阻止冒泡——它解决不了根本问题。真正起效的是组合策略：viewport 限制 + touch 事件拦截 + gesture 事件阻断，三者缺一不可。
viewport 层必须锁死缩放边界
仅靠 JS 阻止事件是补救，viewport 是第一道防线。必须同时满足三个条件：
- initial-scale=1.0：确保页面加载即按原始比例渲染
- minimum-scale=1.0 且 maximum-scale=1.0：堵死缩放上下限，比 user-scalable=no 更可靠（尤其在 iOS 10+ Safari 中）
- user-scalable=no：兼容老版本 Android 和微信内置浏览器
推荐写法：
touchstart + touchend 联动拦截双击
双击本质是两次快速 touchend（间隔 ≤300ms），但仅监听 touchend 容易误伤输入框聚焦等正常操作。稳妥做法是：
- 在 document.documentElement 上监听 touchstart，检测是否多点触控（event.touches.length > 1），立即 preventDefault
- 用时间戳记录上一次 touchend 时间，当前 touchend 若距上次 ≤300ms，就调用 event.preventDefault()
- 务必设置 { passive: false }，否则在 Chrome / iOS 15+ 中 preventDefault 无效
gesturestart 是 iOS 的关键补丁
iOS 系统级双指缩放会触发 gesturestart 事件，它不经过 touch 系列事件流，所以光拦 touch 没用。必须显式监听并阻止：
- document.addEventListener('gesturestart', e => e.preventDefault(), { passive: false })
- 这个监听建议放在 window.onload 或 Vue 的 mounted 钩子中执行，确保 DOM 就绪
- 注意：iOS 10+ Safari 支持该事件，无需降级处理
特别提醒：滚动容器里的缩放陷阱
如果页面有可滚动区域（如列表、弹层），iOS 下在滚动过程中双指张开仍可能触发缩放——这是因为 body 默认捕获了手势事件。解法是：
- 将 body overflow 设为 hidden，把滚动能力转移到内部容器（如 #app）
- 给滚动容器加 touch-action: pan-y（CSS），明确告知浏览器只允许纵向拖拽，禁用缩放手势
- 避免在滚动容器内嵌套监听 touchmove 并 preventDefault，否则会卡顿或失灵
