移动端点击延迟是浏览器真实的300ms双击缩放等待逻辑，由viewport缺失、touch-action误用或元素语义缺失引发；需正确配置viewport meta、在可点击元素显式设置touch-action: manipulation，并避免与fastclick冲突。
移动端点击延迟不是“错觉”，而是浏览器真实存在的 300ms 等待逻辑——它在等待你是否要双击缩放。只要 viewport 缺失、touch-action 没加对地方、或元素缺乏可点击语义，这个延迟就会出现，且肉眼可感。
viewport meta 标签缺失或位置错误直接触发延迟
没写 <meta name="viewport">，或者它不在 最顶部，浏览器就默认启用双击缩放检测逻辑，所有 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 不是开关，也不是继承属性。它只在浏览器判定“此处需触发原生 click”时才起效，且必须显式写在目标元素上。
哪些地方该加、哪些不能加：
- 应该加：
button、a、[role="button"]、[data-action]、轮播图左右箭头、弹层确认按钮 - 千万不能加：
.list外层容器、轮播图主容器、#map、任何需要横向滚动或 pinch-zoom 的区域 - 禁止全局写
* { touch-action: manipulation; }或body { touch-action: manipulation; }——轮播图、地图、图表会失灵
用 DevTools 查看 computed style 中的 touch-action 值，若显示 auto 或被父级 touch-action: none 覆盖，说明没生效。
:active 和 -webkit-tap-highlight-color 必须配合才看得见反馈
禁掉延迟后，click 立刻触发，但用户看不到反馈——这不是 bug，是你忘了给视觉锚点。
关键点：
-
-webkit-tap-highlight-color: transparent只关掉系统高亮，不提供新反馈 - 没配
:active就等于“点了但没感觉”，至少加opacity: 0.7或transform: scale(0.96) - 纯
div加cursor: pointer在 iOS Safari 会触发快速点击白名单，但 Android Chrome 不认，别依赖它 - 带物理键盘的 iPad 或 Windows 触摸本会进
:focus状态，建议统一加:focus { outline: none; }+:active
组件库内置 FastClick 会和 touch-action 冲突
真正容易被忽略的是：你写的 CSS 没问题，但 Vant 2.x、Mint UI 这类老组件库默认内置了 FastClick，它会挂载到 document.body，和你的 touch-action 冲突，甚至引发点击穿透（弹层关闭后，300ms 后 click 落到下层按钮上）。
检查方式：
- 打开 DevTools → Elements → 查看
body上是否有fastclick相关 class 或事件监听器 - 若存在，要么升级组件库，要么手动移除 FastClick 初始化逻辑
- 注意：FastClick 与现代
touch-action方案本质冲突，二者不可共存
最麻烦的不是写错一行 CSS，而是真机上某个按钮突然变慢——可能只是父容器多了一个 touch-action: auto，或者某次构建把 viewport meta 插到了 <title></title> 后面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
