移动端按钮点不中主因是触控区不足44×44px且存在隐形拦截：需设padding+min-width/min-height、box-sizing:border-box、display:block/inline-block、touch-action:manipulation，并排查父容器overflow:hidden和touch-action:none。
移动端按钮点不中，八成是 padding 没给够且没配对
只写 padding: 12px 16px 不够——必须同时满足三个前提：元素不能是 display: inline（比如默认的 a 标签），box-sizing 必须为 border-box，父容器不能有 overflow: hidden 裁掉内边距。真机上高亮按钮时若蓝色框没包住 padding 区域，就是被裁了。
-
display: inline-block或display: block是硬性要求，尤其对链接类按钮 -
box-sizing: border-box必须全局统一，否则padding会额外撑宽总尺寸 - 用
outline: 1px solid red快速验证实际响应边界，比看开发者工具更准
触控区必须 ≥44×44px，min-width 和 min-height 是兜底关键
文字短、图标小的按钮（如 → 或三横线菜单）光靠 padding 可能失效：内容太窄时，浏览器会压缩盒模型，padding 实际生效宽度低于预期。这时 min-width: 44px 和 min-height: 44px 才是保底手段。
- 别只设
width或height——会破坏响应式弹性，窄屏下易溢出 - 推荐组合：
padding: 12px 16px; min-width: 44px; min-height: 44px; - 媒体查询里缩
font-size可以，但min-width/min-height不能随屏幕变小而降低
touch-action: manipulation 不是可选项，是点击灵敏度开关
没加 touch-action: manipulation，哪怕热区已满 44px，iOS Safari 仍可能触发 300ms 延迟或误判为滑动。它不扩大热区，但决定你扩出来的区域能不能被浏览器“当真”。
- 必须加在按钮自身（如
button或带role="button"的div），加在父容器无效 - 避免父层有
touch-action: none（常见于轮播图、滚动容器），会直接拦截子元素事件 - 若按钮含
img，检查子元素是否意外写了touch-action: none——会阻止事件冒泡
伪元素 ::before 扩热区是兜底方案，不是首选
伪元素默认不参与点击热区计算，真要靠它扩展，得绕过三道限制：目标元素必须 position: relative；伪元素要有 content: ""、position: absolute、inset 偏移（如 inset: -12px），且显式设 pointer-events: none；父容器不能有 overflow: hidden 或 transform。
立即学习“前端免费学习笔记（深入）”；
- 伪元素唯一合理用途：视觉不允许加
padding（如导航栏按钮怕撑高），才用::before向外延伸 8–12px - iOS Safari 对伪元素触摸支持极保守，必须真机多环境验证，模拟器不准
- 优先级永远低于
padding + min-size + touch-action组合，别一上来就写伪元素
overflow: hidden 和 touch-action: none 这两个隐形拦截器，它们会让所有热区优化失效——调样式前，先查 computed 样式里的这两个值。 
