必须为元素添加 touch-action: manipulation 并配合 role="button" 和 tabindex="0"，ios safari 才会触发 :active；否则即使样式正确，首次触摸也无反馈，因浏览器未进入激活状态。
直接加 touch-action: manipulation 并配合语义化交互声明，才能让 :active 伪类在真机上即时生效；纯靠 transition 或 background-color 变化本身不会触发反馈，因为浏览器根本没进入 :active 状态。
为什么写了 :active 样式却没反应？
不是 CSS 写错了，是 iOS Safari 默认不激活 :active —— 它只对「被识别为可点击」的元素才响应。普通 <div> 即使加了 <code>cursor: pointer 或 transition，首次触摸仍可能延迟甚至完全不渲染。常见现象包括：刚打开页面第一次点无反馈、动态插入的按钮按压态消失、父容器设了 pointer-events: none 导致事件无法到达。
touch-action: manipulation 必须加在具体元素上
这个属性不继承，也不能只写在 html 或 body 上。它只在触发原生 click 的上下文中起作用：
- 原生可点击标签（如
<button></button>、<a></a>）默认已优化，但如果你重写了display或显式设置了touch-action: auto，就得手动补回 - 自定义按钮（如
<div class="btn">）必须单独加，且要搭配 <code>role="button"和tabindex="0"才能被 iOS Safari 认出 - 轮播图外层容器、地图区域、横向滚动列表不能加——否则会禁用平移手势
- 在 DevTools 的 Computed 面板里确认最终值确实是
manipulation，而不是被第三方样式覆盖成auto - 优先用
background-color或opacity变化，别只改color（文字按压感弱） - 慎用
transform: scale()：iOS 上可能闪烁；如必须用，加will-change: transform - 过渡时间建议控制在
0.12s以内，太长反而让用户觉得“卡” - 确保父容器没设
overflow: hidden，且自身没被pointer-events: none拦截 - 示例：
.btn:active { background-color: #e0e0e0; opacity: 0.8; transition: background-color 0.12s, opacity 0.12s; }
真正有效的按压反馈写法
光有 :active 不够，视觉变化必须足够明确、且避免触发重排：
最常被忽略的一点：真机验证不可替代。模拟器里一切正常，不代表用户手指按下去就有反馈；iOS Safari 对「首次触摸唤醒」和「动态节点注册」有隐式限制，不连真机调试，很容易漏掉关键失效场景。
