移动端:active失效是因浏览器等待双击，需同时设置touch-action: manipulation和-webkit-tap-highlight-color透明，并作用于语义化元素（如button、[role="button"]），配合transform过渡替代纯:active依赖。
移动端点击后 :active 样式不生效、按钮按下去没反应、300ms 才变色——这不是你 CSS 写错了，而是浏览器根本没在点下瞬间触发 :active，它在等双击。
为什么 :active 在手机上经常失效
iOS Safari 和部分 Android WebView 对 :active 有硬性限制：只有监听了 touchstart 的元素，或具备明确交互语义（如 button、[role="button"]、带 onclick 的元素），才可能在触摸开始时应用 :active。纯 CSS 的 .btn:active 在大多数真机上会被忽略，尤其当父容器没监听触摸事件时。
-
:active不是“点下就触发”，而是“浏览器认为这个操作值得立即反馈”时才触发 - Bootstrap 的
.btn类默认没绑定touchstart，所以 iOS 下:active基本不工作 - 即使加了
cursor: pointer，也只对语义化元素起作用，div.btn这类非标准标签仍无效
touch-action: manipulation 必须和 -webkit-tap-highlight-color 配合用
单独加 touch-action: manipulation 能消除 300ms 延迟，但不会让 :active 立刻生效；单独设 -webkit-tap-highlight-color: transparent 只能去掉蓝灰高亮，延迟还在。二者缺一不可，且必须作用在同一个可点击元素上。
- 生效目标必须是交互语义明确的元素：
button、a.btn、[data-bs-toggle]、[role="button"] - 写法示例：
button, .btn, [data-bs-toggle] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } - 千万别写在
*或body上——某些 Android WebView 会直接忽略，或拖慢滚动 -
-webkit-tap-highlight-color: rgba(0,0,0,0)和transparent效果一致，但前者兼容性略好
用 transform + transition 替代依赖 :active 的视觉反馈
既然 :active 不可靠，就别靠它做核心反馈。改用 JS 监听 touchstart/touchend 控制 class，或用纯 CSS 的 transform 微调配合过渡动画，更可控。
- 推荐写法：
.btn { transition: transform 0.1s ease, background-color 0.2s ease; }+.btn:active { transform: scale(0.96); } - 但注意：仅靠这个仍不够，必须确保该元素已满足
touch-action+-webkit-tap-highlight-color前置条件 - 对
data-bs-toggle类组件（如 dropdown 按钮），还需额外补监听：btn.addEventListener('touchend', e => e.preventDefault())，否则首次点击仍卡顿 - 避免用
box-shadow: inset模拟按压——部分低端 Android 机型渲染掉帧，反而显得卡
最容易被忽略的三个细节
真机调试时反复失败，往往卡在这三点：
- 父容器设置了
touch-action: none（比如轮播图 wrapper），子元素的manipulation会被完全覆盖失效 -
pointer-events: none或user-select: none写在按钮自身或其直系父层，会拦截所有触摸事件，连touchstart都收不到 - Bootstrap 5 的
[data-bs-toggle]组件初始化后才绑定 click，但touchend监听必须在 DOM ready 后立刻挂载，晚于初始化就会漏掉第一次点击
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
