:active在移动端h5需三行保底css、语义化标记及仅用transform/opacity动画才生效；否则真机无反应。
:active 在移动端 H5 上默认不触发，不是写法错了，而是浏览器根本没把它当可点击元素处理——必须加三行保底 CSS、确保语义正确、且只用 transform 和 opacity 动画才真正生效。
为什么真机上 :active 完全没反应
常见错误现象：开发时在 Chrome DevTools 模拟器里看着好好的，一上真机（尤其是 iOS Safari 或微信 WebView）就静音。这不是样式被覆盖，而是激活链断了：
- 纯
<div class="btn"> 没加 <code>role="button" tabindex="0"，iOS 直接跳过:active检测 - 父容器写了
overflow: hidden或pointer-events: none，触摸事件传不到目标元素 - 页面缺失
<meta name="viewport" content="width=device-width, initial-scale=1">，部分安卓 WebView 会禁用:active - JS 里在
touchstart中调了event.preventDefault()，顺带阻断了系统对:active的状态识别
必须加的三行保底 CSS（缺一不可）
复制到全局或按钮选择器里，别只写在 :active 规则里：
button, a, [role="button"], .clickable {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
cursor: pointer;
}
说明：
-
-webkit-tap-highlight-color: transparent干掉 iOS 默认灰膜，否则先闪一下再变色，反馈割裂 -
touch-action: manipulation告诉浏览器“这是单点操作，别等双击”，否则延迟 200ms+ 才触发:active -
cursor: pointer是最轻量的“可点击”信号，比空ontouchstart=""更干净，也兼容读屏器
:active 动画只能用 transform 和 opacity
生命周期太短（毫秒级），改 background-color 或 box-shadow 会触发 repaint，低端安卓明显卡顿；改 width/height 更会强制 layout，直接掉帧：
- 推荐组合：
.btn:active { transform: scale(0.98); opacity: 0.85; } - 必须显式声明初始值：
.btn { transform: scale(1); opacity: 1; transition: transform 0.08s ease, opacity 0.12s ease; } - 别在
:active里写transition—— 它不会生效，动画时长必须定义在常态下 - 避免仅靠
opacity主反馈：透出下层文字或背景时容易错位，尤其在滚动容器中
真机调试前必须检查的细节
Chrome DevTools 的 “Toggle device toolbar” 模拟不出真实触摸事件流：
- 触控区域是否 ≥48px —— 小于这个尺寸 iOS 会自动放大点击区域，但可能误触或反馈错位
- 父容器是否设了
overflow: hidden—— 缩放后边缘被裁掉，阴影消失，查开发者工具的 “Computed” 面板看实际渲染尺寸 -
:active规则是否写在:hover后面 —— 否则权重不够，样式被覆盖（LVHFA 顺序） - 非语义化元素（如
<div class="btn">）必须加 <code>role="button" tabindex="0"，否则 iOS Safari 不触发复杂点在于：它不是“写了就能用”的功能，而是一整套事件链校准——从 HTML 语义、viewport 声明、CSS 层叠顺序，到真机上触摸坐标与渲染帧率的匹配。漏掉任意一环，
:active就是摆设。
