移动端按钮的 :active 伪类需三行保底css（-webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer）、语义化标记及仅用transform/opacity动画才真正生效。
移动端按钮的 :active 伪类默认不生效，光写样式等于没写——必须加三行保底 CSS、确保可交互语义、且只用 transform 和 opacity 动画才真正生效。
为什么真机上 :active 根本不触发
不是选择器写错，而是浏览器压根没把你的元素当“可点”：
- 纯
<div> 或没 <code>tabindex="0"的元素，iOS Safari 直接跳过:active - 没声明
touch-action: manipulation，浏览器会等 300ms 判断是否双击，期间不激活:active - 父容器设了
pointer-events: none或overflow: hidden，触摸事件传不到目标元素
必须加的三行保底 CSS（缺一不可）
复制粘贴到全局样式或按钮选择器里：
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+ 才触发 -
cursor: pointer是最轻量的“可点击”信号，比空ontouchstart=""更干净，也兼容无障碍
:active 动画只用 transform 和 opacity
:active 生命周期极短（毫秒级），改 background-color 或 box-shadow 会触发 repaint，低端安卓机明显卡顿；改 width/height 更会强制 layout，直接掉帧：
- 必须显式声明初始值：别在
:active里写transition—— 它不会生效 - 动画时长必须定义在常态下，例如：
button { transition: transform 0.06s ease, opacity 0.08s ease; } - 推荐组合：
transform: scale(0.98)+opacity: 0.85；避免仅靠opacity主反馈，透出下层文字或背景时容易错位
真机调试前必须检查的细节
Chrome DevTools 的 “Toggle device toolbar” 模拟不出真实触摸事件流：
- 触控区域是否 ≥48px —— 小于这个尺寸 iOS 会自动放大点击区域，但可能误触或反馈错位
- 父容器是否设了
overflow: hidden—— 缩放后边缘被裁掉，阴影消失，查开发者工具的 “Computed” 面板看实际渲染尺寸 -
:active规则是否写在:hover后面 —— 否则权重不够，样式被覆盖（LVHFA 顺序） - 非语义化元素（如
<div class="btn">）必须加 <code>role="button" tabindex="0"，否则 iOS Safari 不触发真正难的不是写出
:active，而是让那个“按下瞬间”的视觉变化，在各种设备上都足够快、足够准、足够可信——缩放和透明度必须同步，transition必须写在常态里，而所有这些，都得在真机上摸着屏幕反复试三次才算数。
