移动端 :active 经常不生效是因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的该状态，仅支持 、 等交互元素；需添加 cursor: pointer、touch-action: manipulation 或 ontouchstart=""（微信新版本需 ontouchstart="void(0)"）来启用。
移动端 :active 为什么经常不生效
因为 iOS Safari 和部分安卓 WebView 默认禁用非可点击元素的 :active 状态，本质是浏览器为了防止误触而做的优化。只有明确具有交互能力的元素（比如 <a></a>、<button></button>）才会触发，普通 <div> 或 <code><span></span> 加了 :active 样式也压根不会变。
- 必须给元素添加
cursor: pointer或touch-action: manipulation，前者兼容性好，后者更精准但 Android 低版本支持弱 - 更稳妥的做法是加
ontouchstart=""空属性（仅需存在，无需绑定函数），iOS 会因此认为该元素“可能响应触摸”，从而启用:active - 不要依赖
:hover在移动端做点击反馈——它在大多数触屏设备上不可靠，且无延迟控制
:active 样式写法要注意的三件事
不是所有 CSS 属性都能在 :active 中生效，尤其涉及重排/重绘的属性容易被浏览器跳过或延迟渲染。
- 优先用
background-color、opacity、transform: scale()这类合成层友好的属性；避免改height、margin、left/top - 记得加
transition，否则点击态会“闪一下”就消失；建议统一设transition: background-color 0.15s, opacity 0.15s, transform 0.15s - 如果用了
transform，要确保父容器没设置overflow: hidden且自身没触发will-change: transform冗余声明，否则可能造成视觉裁切或卡顿
替代方案：用 touchstart + touchend 手动控制类名
当 :active 不可控（比如需要长按反馈、或要兼容微信内置浏览器某些旧版本），就得手动接管状态。
- 监听
touchstart时加is-pressed类，touchend/touchcancel时移除 - 务必同时监听
touchcancel，否则手指滑出区域再松开，类名会一直挂着 - 为防点击穿透，建议在
touchstart里加event.preventDefault()，但只对非表单控件这么做；按钮、链接本身有默认行为，加了反而影响可访问性 - 示例：
element.addEventListener('touchstart', () => element.classList.add('is-pressed'))
真机调试时最容易忽略的兼容细节
开发时在 Chrome 模拟器看着正常，一上真机就失效，大概率栽在这几个点上。
立即学习“前端免费学习笔记（深入）”；
- 微信 iOS 客户端 8.0.37+ 对
ontouchstart=""的识别变严格，必须写成ontouchstart="void(0)"才能激活:active - 部分安卓厂商浏览器（如华为 EMUI 内置浏览器）会忽略
transition时间小于0.1s的变化，建议最低设0.12s - 如果页面启用了
viewport的user-scalable=no，某些系统会连带抑制:active响应，临时放开缩放测试一下就能验证
真正麻烦的从来不是写几行 CSS，而是不同 WebView 对“什么算一次有效触摸”的判定逻辑差异太大——同一段代码，在 iOS Safari、微信、QQ、飞书里可能有四种表现。
