button元素默认无触感反馈，需显式设置touch-action: manipulation启用:active态与系统震动；配合cursor: pointer、-webkit-tap-highlight-color: transparent及navigator.vibrate()调用方可实现完整触感体验。
button 元素默认无触感反馈，必须手动加 touch-action
移动端点击 <button> 时没震动、没压感、没视觉变化，不是 bug，是浏览器默认行为。Chrome / Safari 对原生 button 不自动触发系统级触感（如 iOS 的 haptic feedback），也不触发 CSS 按压态（:active 在某些 iOS 版本下会失效）。关键解法是显式声明 touch-action: manipulation，它告诉浏览器“这个元素可被快速点击并触发反馈”，同时启用轻量级合成层优化。
-
touch-action: manipulation是必要前提，缺了它，:active在 iOS Safari 中大概率不生效 - 仅设
touch-action: auto或不设，等于放弃触感控制权 - 若按钮内含复杂操作（如拖拽逻辑），慎用
manipulation，它会禁用pan-x/pan-y，导致手势冲突
用 :active 做视觉压感必须配合 cursor: pointer 和 -webkit-tap-highlight-color
只写 button:active { opacity: 0.7; } 在真机上常无效——iOS Safari 默认屏蔽非链接/非可点击区域的 :active 样式，除非满足三个条件：
- 元素有
cursor: pointer（哪怕只是桌面端 fallback，它会间接激活移动端 active 检测） - 移除高亮遮罩：
-webkit-tap-highlight-color: transparent，否则半透明灰块会盖住你的压感样式 - 确保该
button没被pointer-events: none或父级transform隔离（部分安卓 WebView 下transform: translateZ(0)会导致 :active 失效）
需要真实震动反馈？得调用 navigator.vibrate() 手动触发
HTML/CSS 层面无法直接调用 Taptic Engine（iOS）或 Android 的触觉 API，必须走 JS。注意这不是所有环境都支持：
- 仅在 HTTPS 页面、用户手势触发（如
click、touchend）后 500ms 内可调用navigator.vibrate() - 传参为毫秒数数组，例如
navigator.vibrate([15])是一次短震；[0]可清空队列 - 需先检测支持性：
'vibrate' in navigator，部分安卓定制 ROM 或旧版 WebView 返回false - 别在
submit事件里直接震，表单提交可能跳转/刷新，中断震动；建议在preventDefault()后、异步操作前触发
React/Vue 项目里按钮触感容易漏掉的兼容点
框架组件封装常掩盖底层细节，比如 <Button> 组件内部用了 <div role="button"> 而非原生 button，这就彻底绕过了浏览器对原生控件的触感优化路径：
立即学习“前端免费学习笔记（深入）”；
- 用
role="button"必须手动加tabIndex={0}+onKeyDown处理空格/回车，否则键盘用户和 TalkBack 用户完全不可用 - 自定义按钮要复刻
touch-action: manipulation和-webkit-tap-highlight-color，不能只依赖框架默认样式 - SSR 渲染时，
navigator对象不存在，服务端需 guard：只在typeof window !== 'undefined'且navigator.vibrate存在时执行
touch-action 是开关，vibrate() 是开关后的引擎，而是否用原生 button 决定了你有没有资格拿到这个开关。 
