移动端点击延迟源于ios safari为双击缩放预留300ms判断窗口，需用touch-action: manipulation禁用双击判定并配合-webkit-tap-highlight-color: transparent消除蓝灰高亮，二者须同时作用于具备交互语义的元素（如button、.btn、[role="button"]）才生效。
因为不优化，用户在真机上点按钮会看到丑陋的蓝灰高亮、操作有300ms延迟、开关控件容易误触——这不是Bug，是WebKit和移动端交互机制默认行为，得手动关掉或调优。
iOS点击后那块蓝灰高亮是怎么来的
这是WebKit内核（Safari、iOS WebView）对可点击元素硬编码的-webkit-tap-highlight-color反馈，和:active样式完全无关，也压不住。Bootstrap的.btn类没声明这个属性，所以默认就露馅。
- 只对「可激活」元素生效：必须有
onclick、role="button"，或cursor: pointer -
transparent或rgba(0,0,0,0)才有效；none、unset、initial全无效 - 不能写在
*或body上——某些Android WebView会忽略，甚至拖慢滚动 - 推荐精准选择器：
button, .btn, a.btn, [role="button"], [data-bs-toggle], [data-bs-dismiss]
为什么点一下要等300ms才响应
这不是Bootstrap的问题，而是iOS Safari为双击缩放预留的判断窗口：第一次touchstart后，它会等约300ms看有没有第二次点击，再决定触发click还是doubleclick。
- 加
touch-action: manipulation能跳过这个等待，告诉浏览器“这里只做单点操作” - 建议局部加：
.btn, .nav-link, [data-bs-toggle]，别滥用在地图/图表容器上 - 对
data-bs-toggle类组件（如dropdown），光加CSS不够，还得补touchend监听并e.preventDefault() - 不用
fastclick.js这类老方案——现代浏览器已内置等效逻辑，再加载反而冲突
Bootstrap Switch和selectpicker这些插件怎么不卡
它们不是纯CSS问题，而是事件绑定和触摸热区没对齐。比如Switch默认handle太小，selectpicker下拉列表被键盘顶出视口。
- Switch设
data-size="small"或data-size="mini"，并确保handleWidth: 44（最小触摸尺寸） - selectpicker开
data-mobile="true"，让它降级用原生<select></select>，避开JS渲染错位 - 所有可点击容器加
touch-action: manipulation和-webkit-tap-highlight-color: transparent - 避免父元素设
touch-action: none——子元素的manipulation会被覆盖失效
最常被忽略的是：touch-action和-webkit-tap-highlight-color必须同时存在，且作用在具备交互语义的元素上；只改一个，或者选错目标，真机上照样卡顿或高亮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
