移动端点击延迟源于浏览器300ms双击缩放检测，根本解决需在head顶部正确配置viewport meta标签并配合touch-action: manipulation，否则所有click绑定均受阻。

移动端点击延迟不是“慢了一点”，而是浏览器在 click 事件前硬性插入约 300ms 的等待窗口——只要没配对的 <meta name="viewport"> 或没用 touch-action: manipulation，所有绑定 @click、onclick、addEventListener('click') 的逻辑都会卡在这半拍里。

viewport 缺失直接导致延迟无法绕过

没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，浏览器就默认启用双击缩放检测逻辑。哪怕你写了 touch-action: manipulation，它也无效——因为底层机制仍处于“桌面兼容模式”。真机测试时按钮点下去没反应、Vue 路由跳转卡顿、React 表单提交延迟，八成是这个 meta 标签漏了或写错位置（必须放在 最顶部）。

• 常见错误：加了 user-scalable=no 却漏掉 initial-scale=1.0，部分 Android WebView 仍会保留延迟
• 更隐蔽的问题：动态插入 meta 标签（比如 SSR 渲染后 JS 注入），实际生效时间晚于首屏渲染，延迟照旧
• width=device-width 不可省略——设成固定像素（如 width=375）会导致横竖屏切换时 viewport 重置，触发二次延迟

touch-action: manipulation 必须作用于具体元素

touch-action: manipulation 不是开关，而是声明：“这个元素只做点击，别等双击”。但它不会继承，也不接受 !important，更不能靠父容器一劳永逸。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 写在 body 上 → 滚动区域（如列表、轮播图）可能失灵；写在 * 上 → 图片双指缩放失效
• 按钮是 <div onclick="xxx">？必须显式加 <code>role="button" 和 tabindex="0"，否则 iOS Safari 不识别为可点击目标
• 检查是否被覆盖：用 DevTools 查看 computed style 中 touch-action 值，若显示 auto 或 none，说明父级设置了 touch-action: none（常见于地图容器、Canvas 区域）

:active 样式和 -webkit-tap-highlight-color 要配合用

禁掉延迟后，click 立刻触发，但用户看不到反馈——这不是 bug，是你忘了给视觉锚点。

• -webkit-tap-highlight-color: transparent 只关掉系统高亮，不提供新反馈；不配 :active 就等于“点了但没感觉”
• 纯 div 加了 cursor: pointer 在 iOS Safari 会触发快速点击白名单，但 Android Chrome 不认，别依赖它
• 别只写 :active：带物理键盘的 iPad 或 Windows 触摸本会进 :focus 状态，建议统一加 :focus { outline: none; } + :active，或用 :focus-visible 区分输入方式

真正容易被忽略的，是组件库内部是否还在用 fastclick——比如 Vant 2.x、Mint UI 默认启用，即使你写了 touch-action，JS 层仍会拦截 touch 事件再发 click，造成重复或顺序错乱。得去查文档关掉它的 tap 监听，而不是调样式。