touch-action: manipulation是首选，因它符合W3C标准，直接跳过双击判定流程，既阻止双击缩放又消除300ms延迟，但必须作用于真实可点击元素（如button），伪元素无效，且不可全局滥用或被父级touch-action: none覆盖。
直接给按钮或可点击区域加 touch-action: manipulation，而不是写在 body 或 html 上，否则大概率失效。
为什么 touch-action: manipulation 是首选
双击缩放的本质是浏览器在两次快速 touchend 后触发的默认行为。touch-action: manipulation 显式告诉浏览器：“这个元素只响应单次 tap 和滚动，别等第二次”，从而跳过双击判定流程。它不是 hack，而是 W3C 标准，同时还能消除 300ms 点击延迟。
- 必须作用于真实可点击元素：比如
button、a、或带role="button"的div，伪元素（::before/::after）上写无效 - 不能全局滥用：
* { touch-action: manipulation }会让轮播图拖拽、地图缩放、表格横向滚动全部失灵 - 父级覆盖优先级更高：如果按钮父容器设了
touch-action: none，子元素的manipulation就被无视了
touch-action: none 为什么不能禁双击缩放
touch-action: none 的实际效果是“禁用所有浏览器原生手势处理”，但它并不阻止双击缩放逻辑本身——iOS Safari 在 document.documentElement 层级仍会监听双击并放大视口。更糟的是，它还会让页面完全无法滚动，连 overflow: scroll 都失效。
- 写在
html或body上看似全局，但实际只影响该元素自身，子元素仍可能触发缩放 - 和
pinch-zoom混用无效：touch-action: none pinch-zoom会被浏览器取最严格值，即等效于none - 某些安卓 WebView 对
none的实现不一致，测试时容易漏掉问题
必须配合的三件事，缺一不可
仅靠 CSS 不足以稳定拦截双击缩放，尤其在 iOS 15+ 和部分定制 Android 浏览器中：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">必须静态写在最开头；JS 动态插入无效 - 在
document.documentElement上监听并阻止dblclick：document.documentElement.addEventListener('dblclick', e => e.preventDefault(), { passive: false })——{ passive: false }是硬性要求，否则preventDefault()被静默忽略 - 还要监听
gesturestart（iOS Safari 特有）：document.documentElement.addEventListener('gesturestart', e => e.preventDefault())，它比touchstart更早触发，能拦住快速双击+捏合的组合操作
最容易被忽略的兼容细节
很多项目上线后才暴露出双击缩放问题，往往卡在这些地方：
- Vue 或 React 组件里，
<router-view></router-view>外层布局容器统一加了touch-action: none，导致所有子按钮的manipulation全部失效 - Bootstrap 5 的
.modal默认没设，但某些主题 CSS 里偷偷加了touch-action: none，覆盖了模态框内的按钮 - 用伪元素扩热区时，父容器用了
overflow: hidden，iOS Safari 渲染异常，热区坐标错位，反而增大了与邻近元素的双击误判概率
