移动端按钮点击延迟源于浏览器等待双击缩放，解决方案是：①viewport需完整声明initial-scale=1.0等属性；②优先使用原生<button>；③精准设置touch-action: manipulation；④确保触摸目标≥48×48px。
移动端按钮点击延迟不是 JS 慢，而是浏览器在等你双击缩放——只要没明确告诉它“这里不需要”，就会卡满约 300ms。现代 iOS Safari（9.3+）和 Chrome（36+）支持 touch-action: manipulation 直接跳过等待，这是目前最轻量、最可靠的解法。
viewport meta 标签必须显式含 initial-scale=1.0
只写 <meta name="viewport" content="width=device-width"> 不够。iOS 9.2 及更早版本、UC/QQ 浏览器旧内核仍会保留延迟。必须完整声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意：
- initial-scale=1.0 是触发优化的硬性前提，缺省不生效
- user-scalable=no 或 maximum-scale=1.0 才是真正关闭双击判定的开关；minimum-scale=1.0 单独无效
- 标签必须静态写在 <head> 内，动态插入或误入 <body> 会导致解析失败
按钮必须用 <button>，别用 <div onclick>
原生 <button> 自带焦点管理、:active 渲染通道、键盘支持（Enter/Space），且默认已启用 touch-action: manipulation。换成 <div class="btn"> 后：
- 浏览器不认为它是可交互元素，
touchstart需手动绑定，Safari 可能跳过:active样式 -
role="button"是伪解法：不自动获焦、不响应键盘、部分安卓 WebView 中完全失效 - 若需样式重置，用
button { all: unset; }，而非放弃语义
touch-action: manipulation 要精准加在按钮上，别全局设
这个 CSS 属性是 HTML 级延迟的最终补丁，尤其对 PWA「添加到主屏幕」后仍延迟的 iOS 设备有效：
立即学习“前端免费学习笔记（深入）”；
- 只加在明确有点击意图的元素上，例如
<button>、<div class="js-tap-target"> - 绝不能写在
html或body上，否则纵向滚动会被锁死 - IE10/11 需前缀：
-ms-touch-action: manipulation - 原生可点击元素（
<button>、<a>、<input type="checkbox">）默认已有该行为，除非你显式写了touch-action: auto或display: inline
触摸目标尺寸必须 ≥ 48×48px，且是 clientWidth × clientHeight
这不是视觉问题，而是 DOM 元素实际渲染尺寸必须达标。用 Chrome DevTools 切换设备模式，选中按钮后看右下角 clientWidth 和 clientHeight 值：
- 图标按钮（如
<button><svg></svg></button>）必须显式设min-width: 48px; min-height: 48px; -
padding+border不等于可触尺寸；若内容窄，width或min-width必须撑开 - 相邻可触元素间距至少 8px，否则 VoiceOver 滑动切换焦点时容易连跳
-
label包裹input是最稳的热区放大方案，但input必须是label的**直接子节点**，中间不能有换行或空格
最容易被忽略的是：PWA 添加到主屏幕后，viewport 完整也不代表延迟消失；而一旦加了 touch-action，又忘了兼容 IE10/11，就可能让老设备彻底点不动。
