移动端点击延迟源于浏览器300ms等待窗口，需在<head>顶部声明viewport meta（含width=device-width和initial-scale=1.0），并为可点击元素显式设置touch-action: manipulation，配合:active伪类与-webkit-tap-highlight-color实现即时反馈。
移动端点击延迟不是“慢一点”，而是浏览器在 click 前硬塞了约 300ms 的等待窗口——只要 viewport meta 标签缺失或 touch-action 没加对地方，所有绑定 onclick、@click、addEventListener('click') 的逻辑都会卡住。
viewport meta 标签必须放在 <head> 最顶部
这是所有优化的前提。没它，touch-action: manipulation 直接失效，无论你写得多规范。
-
width=device-width不可省略；设成固定值（如width=375）会导致横竖屏切换时 viewport 重置，触发二次延迟 - 必须同时包含
initial-scale=1.0；只写user-scalable=no在部分 Android WebView 中仍保留延迟 - 动态插入（如 SSR 后 JS 注入）的 meta 标签，生效时间晚于首屏渲染，延迟照旧
- 验证方式：用真机打开 DevTools → Elements → 查看
<meta name="viewport">是否存在、是否在<head>第一行
touch-action: manipulation 必须作用于具体可点击元素
它不是开关，是声明：“这个元素只做点击，别等双击”。不继承、不兜底、不接受 !important，更不能靠父容器一劳永逸。
- 原生可点击元素（
button、a、input[type="button"]）默认已优化，但若你重写了display或覆盖了touch-action，就得手动补回 - 自定义容器（如
<div class="btn">、<li @click="handle">）必须显式加，且建议同步加role="button" tabindex="0"确保 iOS Safari 识别为可点击目标 - 禁止全局设置：
* { touch-action: manipulation }或body { touch-action: manipulation }—— 轮播图、地图、横向滚动列表会失灵 - 检查是否被覆盖：用 DevTools 的 Computed 面板确认最终值是不是
manipulation；若显示auto或none，说明父级（如模态框 wrapper、Canvas 容器）设置了阻断规则
:active 伪类和 -webkit-tap-highlight-color 必须配合使用
禁掉延迟后，click 立刻触发，但用户看不到反馈——这不是 bug，是你忘了给视觉锚点。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-tap-highlight-color: transparent只关掉系统灰层高亮，不提供新反馈；不配:active就等于“点了但没感觉” - 纯
div加cursor: pointer在 iOS Safari 会触发快速点击白名单，但 Android Chrome 不认，别依赖 - 用
transform和opacity实现反馈更可靠：.btn:active { transform: scale(0.96); opacity: 0.85; transition: transform 0.08s ease, opacity 0.12s ease; } - 触控区域至少
min-height: 48px；iOS 对尺寸有硬性要求，文字撑不开点击区时:active直接被忽略
最容易被忽略的是：你写的 CSS 全对，但 Vant 2.x、Mint UI、Foundation 的 foundation.util.touch.js 这类老组件库内部监听了 touchstart，会强制降级回 300ms 判断逻辑。真机测之前，先查有没有这类 JS 在后台悄悄干扰。
