iOS Safari默认不触发:active，需加ontouchstart=""激活；缩放需配transition: transform 0.15s ease及will-change: transform，并确保元素可交互。
移动端 :active 为什么缩放没反应
因为 iOS Safari 默认不激活 :active，哪怕写了 transform: scale(0.95) 也压根不触发。它只对「浏览器认定的可交互元素」即时响应，<div> 这类默认非可聚焦元素，首次触摸甚至要等 300ms 才可能渲染 :active 样式——不是你写错了，是浏览器根本没让它生效。
必须加 ontouchstart="" 吗
不是必须写 JS 函数，但加 ontouchstart=""（空字符串）是最轻量、最通用的激活手段。它向浏览器声明“这个元素要响应触摸”，从而解锁 :active 的即时触发能力。不过要注意：
- 如果元素已经是
<button>或带role="button" tabindex="0"，通常不用额外加 - 微信内置浏览器某些版本对
ontouchstart=""响应更稳定，纯靠cursor: pointer在 iOS 上基本无效 - 加了之后仍无反应？检查父容器是否设置了
pointer-events: none或overflow: hidden截断了事件流
transform: scale 配 transition 的坑
transform: scale(0.95) 要动起来，得和 transition 配对写，但容易掉进几个隐性陷阱：
- 过渡属性必须显式写全：
transition: transform 0.15s ease，不能只写transition: all 0.15s，否则可能把意外的box-shadow变化也拖进动画，造成闪烁 - 时间别超过
0.2s，移动端用户对延迟敏感，0.15s 是兼顾感知与流畅的常见值 - 务必加
will-change: transform，尤其在老款 iOS 设备上，否则scale动画容易卡顿或跳变 - 避免混用单位：不要在初始态用
scale(1)，激活态却写scale(.95)，小数点前的零省略与否虽不影响结果，但保持统一更稳妥
Android 和 iOS 行为不一致怎么办
Android 主流浏览器（Chrome、Firefox）基本按规范走，只要元素可聚焦或绑了事件，:active 就实时生效；iOS 则更保守，即使加了 ontouchstart=""，首次触摸仍可能滞后。真正跨端可靠的最小集合是：
立即学习“前端免费学习笔记（深入）”；
- 用原生
<button>替代<div>—— 最省心 - 若必须用
<div>，则三者至少满足其二：role="button"+tabindex="0"+ontouchstart="" - 加上
touch-action: manipulation，它能进一步抑制双击缩放等干扰行为，并缩短点击判定延迟 - 真机多环境验证不可跳过：iOS 17/18、微信 8.0.x 内核、QQ 浏览器，反馈延迟或完全失效的情况各不相同
最麻烦的不是写法本身，而是以为加了 scale 和 transition 就万事大吉——实际部署后在某台 iPhone 上点下去毫无反应，问题往往出在可访问性声明缺失或测试覆盖不全。
