viewport meta 标签缺失或位置错误（未置于<head>顶部）会导致300ms点击延迟，即使设置touch-action: manipulation也无效；该属性须作用于具体可点击元素且不可继承，同时需配合:active样式和-webkit-tap-highlight-color提供视觉反馈，并排查老旧组件库如Vant 2.x内置FastClick的冲突。
viewport meta 标签缺失或写错位置直接导致延迟
没配 <meta name="viewport">，或者它不在 <head> 最顶部，浏览器就默认启用双击缩放检测逻辑——所有 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 必须作用于具体点击元素
touch-action: manipulation 不是开关，而是声明：“这个元素只做点击，别等双击”。它不会继承，也不接受 !important，更不能靠父容器一劳永逸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只加在明确用于点击的元素上，例如
button、a、[role="button"]、[data-action] - 禁止全局写
* { touch-action: manipulation; }或body { touch-action: manipulation; }——轮播图、地图、图表容器会失灵 - 用 DevTools 查看 computed style 中的值，若显示
auto或被父级touch-action: none覆盖，说明没生效
: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 或事件监听器 - 监听
click打时间戳，看实际触发间隔是否稳定在 10ms 内；若仍有波动，大概率是第三方库干预 - 现代项目应优先移除 FastClick，改用原生方案；必须保留时，务必在组件卸载时调用
FastClick.detach()
真正在意交互响应的项目，往往卡在「以为加了 touch-action 就万事大吉」这一步——其实 viewport 位置、元素语义、组件库行为，三者缺一不可。
