viewport meta标签缺失或位置错误会导致300ms点击延迟，touch-action: manipulation需作用于具体可点击元素且不可全局设置，:active伪类需元素具备可交互身份并配合transform过渡效果。
viewport meta 标签缺失或位置错误直接导致延迟
没写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，或者它没放在 最顶部，浏览器就默认启用双击缩放检测逻辑——所有 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 中的
touch-action值，若显示auto或被父级touch-action: none覆盖，说明没生效
:active 伪类不触发，先看元素有没有“可点击身份”
iOS Safari 只对浏览器认定为“可交互”的元素启用 :active，比如 button、a。纯 div 即使写了 .btn:active，也大概率被跳过计算——不是样式没写对，是压根不进伪类匹配流程。
解决方案：
- 最稳妥：直接用
<button type="button"></button>，零配置即生效 - 次选：给
div加role="button" tabindex="0"，兼顾键盘和读屏器 - 轻量方案：加空属性
ontouchstart=""，现代 iOS 支持良好，但 SPA 动态插入的新按钮也要手动补上 - 必须配
-webkit-tap-highlight-color: transparent，否则 iOS 系统灰层会覆盖你的:active样式
视觉反馈不能只靠 :active，得用 transform + transition
即使 touch-action 和语义都到位，:active 生命周期极短（毫秒级），用 background-color 或 box-shadow 做反馈容易卡顿或被系统高亮盖住。
推荐写法：
.btn { transition: transform 0.08s ease, opacity 0.12s ease; }.btn:active { transform: scale(0.96); opacity: 0.85; }- 触控区域至少
min-height: 48px，iOS 对尺寸有硬性要求，文字撑不开点击区时:active直接被忽略
真机测试前必查的三个盲点：本地模拟器永远正常，问题全在真机链路上。上线前漏掉任意一项，用户就会觉得“按钮点不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
