移动端 :active 不触发是因 ios webkit 要求明确触摸意图，需用 或 role="button"+tabindex="0"，并添加 ontouchstart=""、touch-action: manipulation 和 -webkit-tap-highlight-color: transparent 才能生效。
移动端 :active 不触发，不是 CSS 写错了，而是浏览器压根没把它当可点击元素处理——尤其在 iOS Safari 和主流 WebView（微信、QQ、钉钉）里。
为什么 button:active 在真机上完全没反应
常见错误现象：button:active { background: #007aff; } 在桌面 Chrome 里正常，在 iPhone 上点下去毫无变化。这不是样式失效，是伪类根本没进入匹配流程。
原因很直接：iOS WebKit 要求元素必须有「明确的触摸意图声明」才会启用 :active 的状态计算链路。纯 <button></button> 理论上满足，但若被父容器加了 pointer-events: none、或自身带了 cursor: pointer（移动端无效且可能干扰）、或用了 disabled 属性，都会跳过激活态。
- 优先用原生
<button type="button"></button>，零配置即生效，自带 focus/键盘/无障碍支持 - 若必须用
<div>，至少补全 <code>role="button" tabindex="0"，否则 iOS 12+ 仍可能忽略 - 检查 DevTools → Elements 面板，确认该元素没有被父级的
overflow: hidden或touch-action: none截断事件流 - 给按钮加
ontouchstart=""，哪怕空属性也行：<button ontouchstart="">提交</button> - 不推荐 JS 绑定空函数：
el.addEventListener('touchstart', () => {})—— 容易漏 remove，且依赖执行时机 - SSR 页面、静态页、微前端子应用都适用，无 JS 依赖，兼容性从 iOS 12 起稳定
- 加
touch-action: manipulation到按钮本身（不是 body 或 *）—— 告诉浏览器“这里只点按，别等双击、别缩放”，消除 300ms 延迟，同时让 :active 可被触发 - 加
-webkit-tap-highlight-color: transparent—— 干掉那层恼人的半透明灰膜，否则你的 :active 样式永远被盖在下面 - 反馈不能只靠颜色：用
transform: scale(0.96)或box-shadow: inset 0 1px 2px rgba(0,0,0,0.15)，配合transition: transform 0.08s ease, box-shadow 0.08s ease
ontouchstart="" 是最简可靠的激活开关
全局监听 touchstart 在 iOS 15+ 已基本不可靠，尤其在 iframe、滚动中点击、SPA 动态渲染等场景下容易漏掉或失效。而 ontouchstart="" 是 HTML 层面的声明，浏览器一解析就认定“这个元素要响应触摸”，立刻启用 :active 渲染链路。
实操建议：
必须加的两条 CSS 规则
:active 在移动端持续时间极短（60–100ms），且默认会被 iOS 的灰色高亮层遮盖，视觉反馈几乎不可见。仅靠 background-color 变化基本无效。
关键修复项：
transition 写在哪？写什么？
:active 里写 transition 完全无效。过渡必须定义在常态选择器中，且所有要动画的属性必须有明确初始值。
正确写法示例：
button {
transform: scale(1);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
button:active {
transform: scale(0.96);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
容易踩的坑：
- 别用
transition: all—— 触发 repaint，低端安卓机明显卡顿 - 别动
width/height/border-width—— 触发 layout thrashing，直接掉帧 - 时间控制在 0.06s–0.1s：太短像没响应，超过 0.12s 就显得迟钝
最常被忽略的是：:active 样式权重必须高于 :hover 和 :focus，否则点击后焦点样式会覆盖掉压下效果。顺序很重要，:active 规则得写在它们后面。
