彻底禁止移动端H5双击缩放和长按选中需三者协同：1. viewport设initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0、user-scalable=no；2. JS拦截touchstart（多指）、touchend（双击）及gesturestart；3. CSS禁用用户选中、统一输入框字号、禁文本缩放，并为滚动容器设touch-action: pan-y。

要彻底禁止移动端 H5 页面的双击缩放和长按选中，不能只靠单一手段。核心是viewport 锁死 + 触控事件拦截 + 系统级手势阻断三者协同，缺一不可。

viewport 元标签必须写全且精准

仅设 user-scalable=no 在 iOS 10+ 已基本失效。必须同时满足以下四点：

• initial-scale=1.0：确保页面加载即按原始比例渲染
• minimum-scale=1.0 和 maximum-scale=1.0：比 user-scalable=no 更可靠，尤其对 Safari 有效
• user-scalable=no：兼容老版 Android 和微信内置浏览器

推荐写法（直接放入 ）：

用 JS 拦截双击和多指缩放行为

双击本质是两次快速 touchend（间隔 ≤300ms），但仅监听 touchend 容易误伤输入框聚焦。稳妥做法是组合拦截：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 在 document.documentElement 上监听 touchstart，检测 event.touches.length > 1 时立即 preventDefault()
• 记录上一次 touchend 时间戳，当前 touchend 若距上次 ≤300ms，也调用 preventDefault()
• 所有监听必须带 { passive: false }，否则在 Chrome / iOS 15+ 中无效

必须监听并阻止 gesturestart 事件

iOS 系统级双指缩放不走 touch 流程，而是直接触发 gesturestart。光拦 touch 完全没用：

• 需显式添加：document.addEventListener('gesturestart', e => e.preventDefault(), { passive: false })
• 建议放在 window.onload 或 Vue 的 mounted 钩子中执行，确保 DOM 就绪
• iOS 10+ Safari 原生支持，无需降级处理

顺手禁掉长按选中和文字缩放

长按选中文本、图片，或点击小字号 input 后自动放大，属于不同机制，需额外处理：

• CSS 加上：* { -webkit-user-select: none; user-select: none; }
• 防 iOS 输入框放大：input, textarea { font-size: 16px; }
• 禁文本自适应缩放：html { -webkit-text-size-adjust: 100%; }
• 若页面有滚动区域，给滚动容器加 touch-action: pan-y，避免手势被 body 捕获误触发缩放