必须viewport锁死+touch事件拦截+gesture事件阻断三者协同：viewport设minimum/maximum-scale=1.0；touchstart/end监听并preventDefault；全局监听gesturestart阻止；滚动容器用touch-action:pan-y。
移动端 H5 中拦截双指缩放，不能只靠“阻止冒泡”或单点 JS 拦截——它本质是系统级手势，必须 viewport 锁死 + touch 事件拦截 + gesture 事件阻断三者协同生效。单独做任何一项都可能在 iOS 10+、微信或新版 Chrome 中失效。
viewport 层：第一道且最可靠的防线
必须在 中声明完整、无妥协的 viewport 配置：
- initial-scale=1.0：确保页面加载即按原始比例渲染，不因设备差异自动缩放
-
minimum-scale=1.0 且 maximum-scale=1.0：比
user-scalable=no更强制——iOS 10+ Safari 已忽略后者，但严格限制缩放区间仍有效 - user-scalable=no：保留用于兼容老版 Android 和微信内置浏览器（尤其 v6.x 以下）
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
touchstart + touchend 联动：精准识别并拦截双击与多点操作
仅监听 touchend 容易误伤输入框聚焦；仅拦 touchstart 又无法覆盖双击逻辑。稳妥做法是组合判断：
- 在
document.documentElement上监听touchstart，检测event.touches.length > 1（双指/多指触控），立即preventDefault() - 为
touchend添加时间戳防双击：记录上一次touchend时间，若当前距上次 ≤300ms，调用preventDefault() - 两个监听器都必须传
{ passive: false }，否则在 iOS 15+/Chrome 88+ 中preventDefault()会被静默忽略
gesturestart：iOS 系统级缩放的专属补丁
iOS 的双指缩放会绕过 touch 流程，直接触发 gesturestart。这个事件不冒泡、不捕获，也不受 touch 拦截影响——必须显式监听并阻止：
- 添加全局监听：
document.addEventListener('gesturestart', e => e.preventDefault(), { passive: false }) - 建议放在
window.onload或框架生命周期钩子（如 Vuemounted、ReactuseEffect(() => {}, [])）中执行，确保 DOM 就绪 - iOS 10+ 全面支持该事件，无需降级兼容
滚动容器场景：避免“滚动中意外缩放”陷阱
当页面含可滚动区域（如长列表、弹窗内容区），iOS 下在拖拽过程中双指张开仍可能触发缩放——因为 body 默认捕获了手势事件：
- 将
body设为overflow: hidden，把滚动能力完全交给内部容器（如#app或.scroll-container） - 给滚动容器设置 CSS：
touch-action: pan-y，明确告知浏览器只允许纵向拖拽，禁用缩放、旋转等手势 - 切勿在滚动容器内额外监听
touchmove并preventDefault()，否则会导致滚动卡顿或失灵
