移动端禁用缩放需三步：一是为touchmove设passive: false；二是document级捕获阶段调用preventDefault()；三是配合viewport meta中user-scalable=no。
在移动端 Web 开发中，touchmove 事件默认会触发页面缩放（尤其是双指拖拽时），但仅靠 preventDefault() 并不能直接“禁用缩放”——它真正阻止的是**浏览器对 touchmove 的默认行为响应**，而缩放是否发生，取决于事件是否被正确拦截、是否在捕获/冒泡阶段及时调用 preventDefault()，以及是否满足浏览器的“非被动事件”前提。
关键前提：touchmove 必须是非被动（non-passive）事件监听器
现代浏览器（Chrome ≥56、Safari ≥12.2 等）为 touchstart 和 touchmove 默认启用 passive: true，意味着你无法在事件处理函数中调用 preventDefault()（否则控制台报错：Unable to preventDefault inside passive event listener）。因此第一步是显式声明 passive: false：
element.addEventListener('touchmove', handler, { passive: false });- 若需全局禁用缩放（如整个
），也必须对touchmove使用该配置 - 注意：
passive: false会影响滚动性能，仅在确实需要阻止默认行为时启用
事件捕获阶段调用 preventDefault 更可靠
缩放行为由浏览器在捕获阶段就已开始响应（尤其双指操作）。若在冒泡阶段才调用 preventDefault()，可能已被浏览器“提前执行”缩放逻辑。因此推荐在捕获阶段监听并阻止：
document.addEventListener('touchmove', e => e.preventDefault(), { passive: false, capture: true });- 将监听器绑定到
document或window，确保覆盖所有区域（包括 iframe 外部） - 使用
capture: true确保在捕获阶段就拦截，比冒泡阶段更早
仅阻止缩放，不干扰正常滚动（可选进阶）
全量阻止 touchmove 会导致页面无法滚动。如需保留单指纵向滚动、仅禁用双指缩放，需结合事件判断：
- 检查
e.touches.length > 1—— 只有双指及以上才可能触发缩放 - 避免在单指滑动时调用
preventDefault()，否则滚动失效 - 示例逻辑：
document.addEventListener('touchmove', e => {<br> if (e.touches.length > 1) {<br> e.preventDefault();<br> }<br>}, { passive: false, capture: true });
配合 meta viewport 彻底关闭用户缩放
JavaScript 拦截是运行时手段，还需静态限制作为兜底：
- 在
中添加： - 注意：
user-scalable=no在 iOS Safari 中仍可能被部分手势绕过（如双击放大），所以仍需 JS 配合 - Android Chrome 对该 meta 属性支持较好，但新版也倾向依赖事件监听
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
