移动端点击失效主因是交互样式拦截，需检查pointer-events、user-select、touch-action是否为none；其次box-sizing不一致、min-width不足、click延迟及事件委托错位也会导致问题。
移动端点击太小，padding加了没用？检查是否被user-select: none或pointer-events: none拦截
Bootstrap 的按钮、导航项在手机上点不中，不是 padding 不够，常是父层或自身被加了禁止交互的样式。比如某些自定义组件里写了 user-select: none，看着能点，实际事件没冒泡；或者用了 pointer-events: none 临时禁用又忘了恢复。
- 用浏览器开发者工具选中元素，看「Computed」面板里
pointer-events是否为none -
padding确实生效但没反应？优先查touch-action是否被设成none（尤其在轮播图容器里） - Bootstrap 5+ 默认对
.btn加了touch-action: manipulation，这是好事；但如果你覆盖了它，就得手动加回来
用padding扩点击区时，为什么视觉错位？警惕box-sizing和border干扰
直接给 .btn 加 padding: 12px 20px 后按钮变大、文字偏移，大概率是没统一 box-sizing。Bootstrap 4/5 默认用 border-box，但如果你项目里重置过 CSS，或引入了老版本 normalize.css，可能退回到 content-box。
- 所有点击类元素统一加
box-sizing: border-box，避免 padding 撑开总宽 - 慎用
border配合大 padding —— 边框会叠加在 padding 外，进一步扩大尺寸，且在低分辨率屏上模糊 - 移动端推荐用
rem或em设 padding，比如padding: 0.75rem 1.25rem，比固定像素更适配缩放
Bootstrap 5 的btn类默认min-width太小，怎么安全放大而不破布局？
原生 .btn 在 iOS Safari 下最小宽度约 44px（苹果人机指南要求），但 Bootstrap 没强制这个值，导致部分小按钮在真机上难触发。不能粗暴设 min-width: 44px，否则在桌面端显得突兀。
- 用媒体查询只在触屏设备生效：
@media (hover: none) and (pointer: coarse) { .btn { min-width: 44px; } } - 避免影响响应式断点逻辑：别改
$btn-padding-y这类 Sass 变量，全局改会影响所有尺寸（btn-sm/btn-lg） - 如果用的是 Bootstrap 4，记得补
-webkit-tap-highlight-color: transparent，否则 iOS 点击高亮会盖住 padding 区域
真机测试时点击还是飘，是不是click事件本身有问题？
是。移动端 click 有约 300ms 延迟，且依赖「稳定点击」判定 —— 手指轻微滑动就会转成 touchmove，click 不触发。这时候光扩 padding 没用，得换事件源。
- 优先用
click+touchstart双绑，或直接上pointerdown（兼容性够用：Chrome 55+/Safari 13+/Firefox 59+） - 不要依赖
:active伪类做反馈，iOS Safari 对非可点击元素（如div）的:active支持极差 - 如果必须用
click，确保目标元素有cursor: pointer，这会帮 Safari 更准识别可点击区域
真正麻烦的是嵌套结构：比如 <button><span>文字</span></button>，span 上写了 display: inline-block 和 padding，但事件委托没兜住 —— 这时候点 span 区域，click 可能不冒泡到 button。得确认事件监听挂在哪一层，别想当然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
