必须加 touch-action: manipulation 消除 300ms 延迟，热区需 ≥44×44px 且同步缩放 font-size 与 padding，关闭 -webkit-tap-highlight-color 并用 CSS 变量确保 :active 生效，四者联动才能解决移动端按钮点不中、反应慢、反馈弱问题。
手机端按钮点不中、反应慢、视觉反馈弱——不是按钮写得不对，是没绕过 iOS Safari 和 Android WebView 的底层限制。核心就三点：热区撑开、点击加速、反馈可见。
必须加 touch-action: manipulation 才能消除 300ms 延迟
这是最常漏掉的第一步。iOS Safari 默认等 300ms 判断是否双击缩放，click 事件卡在这儿。加了这个 CSS 属性，浏览器立刻跳过判断：
- 直接写在按钮类上：
.btn { touch-action: manipulation; } - 别只加在
body或父容器——如果父元素设了touch-action: none，子元素的manipulation就失效 - 禁用双击缩放不等于禁用所有手势：
manipulation允许平移和 pinch 缩放，但禁止双击，安全可用 - 对
[data-bs-toggle]这类组件（如 dropdown 按钮），光加 CSS 不够，还得补 JS 监听touchend并调click()，否则首次点击仍卡顿
按钮热区至少 44×44px，但不能靠 padding 硬撑
iOS 强制给 <button></button> 设 min-height: 44px，这是 WCAG 合规要求，绕不开。问题在于：你写了 .btn-sm，文字小了，但系统仍把热区拉到 44px 高，导致按钮“头重脚轻”或文字悬空。
- 正确做法是同步控制
font-size和padding，用clamp()让它们随视口线性缩放：font-size: clamp(0.75rem, 2.5vw, 1rem); padding: clamp(0.25rem, 1.2vw, 0.5rem) clamp(0.5rem, 2vw, 1rem); - 千万别只调
padding—— 小屏下内边距过大，按钮胖得占满屏幕；大屏下又太小，热区不够 - 图标要继承字体大小：
.btn i { font-size: inherit; vertical-align: -0.125em; }，否则图标位置漂移 - 若真要压低热区（极少数场景），加
-webkit-appearance: none，但必须手动补全border、background、cursor、outline，否则按钮视觉消失
去掉蓝灰高亮，同时确保 :active 样式生效
点击后那块丑陋的蓝灰色蒙层是 -webkit-tap-highlight-color，和 :active 完全无关。它默认覆盖所有可点击语义元素，且无法用普通 CSS 压住。
- 必须显式关闭：
.btn, button, [role="button"] { -webkit-tap-highlight-color: transparent; } -
:active样式常改不动？因为 Bootstrap 5.3+ 大量用:where()降权，你写的.btn:active权重不够，会被.btn-primary:active覆盖 - 稳妥方案是用 CSS 变量：
:root { --bs-btn-active-bg: #2a5800; --bs-btn-active-border-color: #1e4200; }，Bootstrap 5.2+ 原生支持 - 移动端必须加
touch-action: manipulation才能让:active生效，否则 Safari 根本不触发该伪类
真正难的不是单点优化，而是四者联动：热区尺寸、点击延迟、视觉反馈、状态一致性。少一个，用户就会觉得“按钮粘滞”或“点了没反应”——这不是样式问题，是交互链断掉了。
