移动端按钮 :active 失效是因 iOS Safari 等浏览器默认延迟激活以避免误触，需添加 touch-action: manipulation 才能即时响应；配合 opacity、transform 缩放等轻量变化，并用 JS 补足 touchstart/touchend 临时 class 实现可靠点击反馈。
移动端按钮点击态为什么用 :active 会失效
因为 iOS Safari 和部分安卓 WebView 默认禁用 :active 样式，直到用户松开手指才触发——导致点击瞬间没反馈，体验像“卡住”。这不是 CSS 写错了，是浏览器策略：为避免误触滚动，延迟激活伪类。
- 必须给元素加
cursor: pointer或监听touchstart才能提前激活:active - 更可靠的方式是用
:focus-visible+:focus-within配合tabindex，但仅适用于键盘/辅助设备 - 真正在触摸屏上稳定生效的，其实是
:hover（在支持 hover 的移动浏览器中）+:active双写，且需确保元素可聚焦
用 :active + touch-action 强制触发点击反馈
关键不是“怎么写样式”，而是“怎么让样式及时生效”。touch-action: manipulation 能告诉浏览器：“这个元素只做点击/轻触，别等滚动判定完再响应”。
- 给按钮加
style="touch-action: manipulation;"，iOS 12+ 和主流安卓浏览器立刻认:active - 不要只依赖
:active改背景色——颜色变化太弱，建议同时缩放transform: scale(0.98)或加opacity变化 - 避免在
:active中改height/width，会触发重排，造成卡顿
button {
touch-action: manipulation;
}
button:active {
opacity: 0.7;
transform: scale(0.98);
}
响应式按钮点击态要区分 pointer 和 touch 设备
CSS 媒体查询里没有 “is-mobile” 这种东西，但可以用 @media (hover: hover) and (pointer: fine) 锁定鼠标设备，反向推导触控设备。
- 鼠标设备优先用
:hover+:active；触控设备靠:active+touch-action保底 - 不要用
@media (max-width: 768px)判断是否是移动端——折叠屏、横屏手机、桌面触控本都会错判 - 真需要设备感知，用
@media (pointer: coarse)更准，它表示“粗粒度指针”，基本等于触摸屏
:active 的样式持续时间太短，怎么延长反馈
:active 是瞬时状态，松手就消失，没法模拟“按住 200ms 后再松开”的自然反馈。这时候得放弃纯 CSS，用少量 JS 补足。
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart给按钮加临时 class（如is-pressed），touchend/touchcancel移除 - 用
transition: background-color 0.15s, opacity 0.15s控制恢复节奏，比默认的 0.05s 更可感知 - 别用
setTimeout延迟移除 class——手势中断（比如滑动离开按钮）时会造成残留态
复杂点在于：同一个按钮可能被鼠标、触控、键盘三种方式激活，而 :active 只覆盖前两者。真正健壮的点击反馈，得把 :focus、:active、is-pressed 三者样式对齐，否则 tab 切换时反馈不一致。
