:active在移动端失效主因是浏览器延迟触发且需元素可交互；加ontouchstart=""或touch-action:manipulation可修复，缩放须配transform-origin并仅用transform/opacity优化性能。
为什么 :active 在移动端经常失效或不灵敏
直接写 a:active { transform: scale(0.95); } 在 iOS Safari 或部分安卓 WebView 里几乎没反应——根本原因是移动端浏览器默认会延迟触发 :active，直到触摸结束（甚至要等点击事件冒泡完成），且很多情况下需要元素有 cursor: pointer 或可聚焦属性才能激活伪类。
更关键的是：iOS Safari 对非可点击元素（比如 div）的 :active 完全忽略，除非它满足「原生可交互」条件。
- 给元素加
ontouchstart=""（空处理）能强制触发:active状态，这是最轻量的兼容方案 - 确保元素有
touch-action: manipulation，避免滚动/双击干扰，同时提升响应速度 - 避免在父容器上设
pointer-events: none或overflow: hidden意外截断触摸事件
:active 缩放反馈必须配合 transform-origin 才自然
单纯 scale(0.95) 会让按钮从中心收缩，视觉上像“陷进去”，但原生 App 通常是锚点在中心、轻微压感式缩放。如果按钮带边框或阴影，不设原点会导致边缘抖动或裁剪。
实操中务必显式声明缩放原点：
.btn:active {
transform: scale(0.96);
transform-origin: center center;
}
- 用
center center而非默认值（也是 center，但显式写更稳） - 若按钮是左对齐文字+图标组合，可改用
left center避免图标位移过大 - 慎用
transform-origin: 0 0——右下角缩放会严重偏移，尤其在 flex 布局中易引发重排错位
真机调试时发现缩放卡顿？检查是否触发了 layout
某些 CSS 属性（如 width、height、border、box-shadow）在 :active 中变更，会强制浏览器同步计算布局，导致缩放帧率掉到 30fps 以下，手感发涩。
- 只用
transform和opacity做:active动画——它们走合成层，GPU 加速 - 避免在
:active里改background-color（虽不触发布局，但可能引起 repaint，低端机仍可感知卡顿） - 用
will-change: transform提前提示合成器，但仅对频繁交互的按钮加，别滥用
需要更接近原生的“按压回弹”感？纯 CSS 不够用
:active 只能表达按下瞬间状态，松手就立刻恢复，没有缓动、没有延迟回弹，和 iOS 的 spring(0.2, 18, 18, 2) 或 Android Ripple 差很远。
如果设计要求严格还原，得退一步：
- 保留
:active作降级 fallback（无 JS 时仍有基础反馈） - 用
element.addEventListener('touchstart', ...)+requestAnimationFrame控制 class 切换，模拟弹性动画 - 注意 touchstart 后立即 preventDefault 可能影响滚动，推荐用
{ passive: false }并只在按钮区域调用
真正难的不是缩放本身，而是让缩放节奏、持续时间、中断响应都匹配系统手势管线——这点 CSS 伪类天生做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
