touch-action: manipulation 在 ios safari 13.4 前完全不生效，是因浏览器实现滞后而非 bug；12.x 和 13.0–13.3 版本直接忽略该值回退至 auto，300ms 延迟仍存在；需用 @supports 包裹样式、降级为 pan-y pinch-zoom 或 -webkit-touch-callout: none，并注意父级 touch-action: none 会强制覆盖子元素设置。
touch-action: manipulation 在 iOS Safari 13.4 之前完全不生效
这不是 bug，是 Safari 实现滞后——iOS Safari 13.4 才开始完整支持 touch-action: manipulation。12.x 和 13.0–13.3 版本会直接忽略该值，回退到 auto，300ms 点击延迟照常存在。
实操建议：
- 用
@supports (touch-action: manipulation)包裹样式，避免低版本解析异常或干扰其他规则 - 对 iOS 13.4 以下必须降级：比如改用
touch-action: pan-y pinch-zoom（保留滚动+双指缩放），或加-webkit-touch-callout: none抑制长按唤出缩放菜单 - 真机测试必须覆盖 iOS 12.5.7 和 13.3 —— 这两个仍是部分企业内网设备主力版本
父容器 touch-action: none 会让子元素 manipulation 失效
CSS 的 touch-action 不支持子元素“覆盖”父级设置。只要祖先节点（哪怕只是 div#app）设了 touch-action: none，其所有后代即使显式写 touch-action: manipulation 也无效。
常见错误场景：
- UI 框架（如 Vant、Naive UI）初始化时给根容器设了
touch-action: none，你自己的按钮加了manipulation白加 - 轮播组件内部用了
touch-action: none防止滑动冲突，结果把子按钮的点击响应也锁死了 - 用 Chrome DevTools 的「Rendering」面板勾选 Highlight touch actions，能一眼看出哪块区域实际生效的是哪个值
Android WebView 中 touch-action 被忽略的典型原因
不少 Android App 内嵌 WebView（尤其旧版 X5 内核、系统 WebView ≤ Android 8.1）根本不解析 touch-action，哪怕写了也当没写。这时延迟不会消失，manipulation 形同虚设。
判断和应对方式：
- 检查 UA 字符串是否含
MQQBrowser或UCBrowser—— 这些厂商内核对 CSS 手势支持极差 - 对这类环境，必须 fallback 到 JS 拦截：
gesturestart+touchstart双监听，并确保事件绑定带{ passive: false } -
touch-action: manipulation在 Android Chrome ≥ 61 支持良好，但 WebView ≠ Chrome，不能混为一谈
为什么加了 touch-action 还是触发双击缩放？
最常见原因是 <meta name="viewport"> 配置不完整。即使 CSS 层面限制了 touch-action，浏览器在检测到缺失 user-scalable=no 或 maximum-scale=1.0 时，仍可能对双击事件执行默认缩放逻辑。
关键点：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">必须静态写在最早位置，JS 动态插入完全无效 - 仅靠
maximum-scale=1.0不足以阻止 iOS Safari 的双击缩放；user-scalable=no缺一不可 - 若页面内容高度超出视口（比如未设
html, body { height: 100vh; }），iOS Safari 会自动启用双指缩放查看溢出区，此时touch-action也救不了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
