touch-action: manipulation 可消除300ms延迟，但仅对明确可点击元素生效；需配合正确 viewport meta（位于 head 最顶部、含 width=device-width 和 initial-scale=1.0）、避免全局设置、禁用 fastclick 冲突，并为点击元素补充 :active 和 -webkit-tap-highlight-color 样式。
touch-action: manipulation 能直接砍掉 300ms 延迟，但只对明确可点击的元素生效；不配 viewport meta 或加错位置，这行 CSS 就等于没写。
viewport meta 标签必须在
浏览器看到没 <meta name="viewport">，或者它被塞在 <title></title> 后面、CSS 之后，就会默认启用双击缩放检测——所有 click 都卡死在那 300ms 里。哪怕你写了 touch-action: manipulation，也无效。
-
width=device-width不可省略；设成固定像素（如width=375）会导致横竖屏切换时 viewport 重置，触发二次延迟 -
user-scalable=no必须搭配initial-scale=1.0，否则部分 Android WebView 仍保留延迟 - 动态插入 meta（比如 SSR 渲染后 JS 注入），生效时间晚于首屏渲染，延迟照旧
touch-action: manipulation 必须作用于具体点击元素
它不是开关，是声明：“这个元素只做点击，别等双击”。它不会继承，也不接受 !important，更不能靠父容器一劳永逸。
- 只加在明确用于点击的元素上，例如
button、a、[role="button"]、[data-action] - 禁止全局写
* { touch-action: manipulation; }或body { touch-action: manipulation; }——轮播图、地图、图表容器会失灵 - 用 DevTools 查看 computed style 中的值，若显示
auto或被父级touch-action: none覆盖，说明没生效 - 原生
button默认已优化，但如果你重写了display（比如改成inline-block）或覆盖了touch-action，就得手动补回
:active 和 -webkit-tap-highlight-color 必须配合
禁掉延迟后，click 立刻触发，但用户看不到反馈——这不是 bug，是你忘了给视觉锚点。
-
-webkit-tap-highlight-color: transparent只关掉系统高亮，不提供新反馈 - 没配
:active就等于“点了但没感觉”，至少加opacity: 0.7或背景色变化 - 纯
div加cursor: pointer在 iOS Safari 会触发快速点击白名单，但 Android Chrome 不认，别依赖它 - 带物理键盘的 iPad 或 Windows 触摸本会进
:focus状态，建议统一加:focus { outline: none; }+:active
老组件库可能还在用 FastClick
真正容易被忽略的是：你写的 CSS 没问题，但 Vant 2.x、Mint UI 这类老组件库默认内置了 FastClick，它会挂载到 document.body，和你的 touch-action 冲突，甚至引发点击穿透（弹层关闭后，300ms 后 click 落到下层按钮上）。
- 检查方式：打开 DevTools → Elements → 查看
body上是否有fastclick相关 class 或属性 - 冲突表现：
touch-action显示生效，但真机测试仍有明显停顿感 - 解决办法：移除 FastClick 初始化代码，或在初始化前先移除 body 上的 fastclick 绑定
最麻烦的不是加不加这行 CSS，而是判断“哪几个元素该加、哪几个绝对不能加”——轮播图指示点要加，轮播图容器本身却必须保持 touch-action: pan-x；弹层关闭按钮要加，弹层遮罩层却得留着 auto 才能响应滑动关闭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
