touch-action: manipulation不能让页面支持缩放，因为它专为禁用双击缩放并保留滚动而设计；它会截断双击事件的第二次tap，使click立即触发，从而切断双击缩放信号链，即使viewport设为user-scalable=yes也无效。
touch-action: manipulation 为什么不能让页面支持缩放
它根本不是为“启用缩放”设计的，而是为“禁用双击缩放 + 保留滚动”服务的。加了 touch-action: manipulation 的元素，浏览器会直接忽略双击事件的第二次 tap，click 立即触发，但同时也切断了双击缩放的信号链——这不是 bug，是规范行为。
常见错误现象：body { touch-action: manipulation; } 后，用户完全无法双击放大页面，哪怕 <meta name="viewport" content="user-scalable=yes"> 已写对。因为 viewport 允许缩放，但 manipulation 把触发入口封死了。
- 真正需要缩放的区域（如地图、图表容器），应单独设
touch-action: pinch-zoom，且父级不能有manipulation或none覆盖 -
manipulation仅对加了该样式的元素生效，不会继承到子元素，但会被父级touch-action: none强制覆盖 - iOS Safari 13.4 之前，还需配合
-webkit-touch-callout: none防止长按触发缩放菜单
哪些地方必须加 touch-action: manipulation
所有你用 JavaScript 监听 click 或 tap 的非原生可点击元素，比如 <div class="btn">、<code><span onclick="doSomething()"></span>、Vue/React 中绑了 @click 的自定义按钮。
不加的话，在 iOS Safari 和部分 Android WebView 中，这些元素点击后会有约 300ms 延迟，用户明显感知“点不动”。而原生 <button></button> 和 <a></a> 默认已优化，无需额外加。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
button, [role="button"], .btn, .switch, .modal-close { touch-action: manipulation; } - 避免全局写
* { touch-action: manipulation; }，否则轮播图横向滚动、图片双击放大等功能会失效 - 如果用了 Hammer.js 或类似库，初始化时要显式传
{ touchAction: 'none' }，否则其内部默认行为可能和 CSS 冲突
touch-action: manipulation 和 viewport 的关系
二者控制的是不同层级：viewport 是页面级开关，决定“整个页面是否允许缩放”；touch-action 是元素级策略，决定“这个区域响应哪些手势”。它们可以共存，但优先级上，touch-action 更细粒度、更早拦截。
典型误配：<meta name="viewport" content="user-scalable=yes"> + body { touch-action: manipulation; } → 页面整体缩放功能被废，因为 body 拦截了所有双击事件。
- 若需全局允许缩放，就别在
html或body上设manipulation，只加在具体操作元素上 - 若某区域（如地图）需独立支持捏合缩放，用
touch-action: pinch-zoom，且确保其父容器没设none或manipulation - Android WebView 对
minimum-scale=1.0和maximum-scale=1.0敏感，仅靠user-scalable=no可能无效
容易被忽略的兼容性细节
IE10–11 支持 touch-action，但不识别 manipulation 值（只认 none、pan-x 等），不过 IE 移动端早已淘汰，实际影响极小。真正要盯住的是继承压制和 passive 事件冲突。
例如：父容器设了 touch-action: none，子元素即使写了 manipulation 也无效；又或者你在监听 touchmove 时用了 preventDefault() 却没声明 { passive: false }，iOS Safari 会直接忽略它，导致滚动卡顿或缩放异常。
- 检查继承链：
getComputedStyle(el).touchAction看最终计算值是不是预期的manipulation - 涉及
touchmove+preventDefault()的场景，必须用{ passive: false }绑定 - 不要依赖 JS 动态插入 viewport meta —— iOS Safari 完全无视它，必须静态写在
里
