h5移动端按钮缩放反馈应优先用:active伪类配合transform:scale()和transition，加touch-action:manipulation消除300ms延迟；禁用:hover实现核心反馈；异步场景改用js监听touchstart/touchend切换.is-pressed类。
在 H5 移动端中，用 CSS transition 配合 transform: scale() 实现按钮点击缩放反馈，关键在于正确触发状态变化、避免 300ms 延迟，并兼顾触摸设备的响应表现。
用 :active 触发即时缩放
移动端浏览器默认对 :active 伪类支持良好（尤其在加了 touch-action: manipulation 后），是实现轻量点击反馈的首选方式：
- 给按钮设置
transform: scale(1)初始态，并添加transition: transform 0.15s ease - 在
:active中设为transform: scale(0.92)（轻微内缩更自然，避免突兀） - 务必加上
touch-action: manipulation，防止 iOS Safari 触发 300ms 延迟或默认高亮
规避 :hover 在移动端的误触发
不要依赖 :hover 实现点击反馈——它在多数安卓和 iOS 上行为不可靠（比如悬停不消失、误触发）。:active 是唯一语义正确且可预测的状态钩子。若需兼容 PC 端，可保留 :hover 作为增强，但核心交互必须由 :active 承担。
补充：需要更可控逻辑时用 JS 切换 class
当按钮需响应异步操作（如请求中禁用、加载态缩放取消）、或要避免 iOS 上 :active 在快速连点时失效时，推荐 JS 控制：
- 监听
touchstart（非click，因 click 有延迟）添加临时 class，如.is-pressed - 监听
touchend、touchcancel和mouseleave移除该 class - CSS 中写
.btn.is-pressed { transform: scale(0.92); }，过渡保持一致
细节优化建议
• 缩放中心点默认是元素中心，如需以左上角缩放，加 transform-origin: top left
• 避免同时过渡多个属性，只过渡 transform 和 opacity，性能更稳
• 在 中加 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 保证视口稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
