触摸目标必须≥48px×48px，是系统级生效阈值；需设min-width/min-height、padding、touch-action:manipulation，并确保display和box-sizing正确，否则真机点不中。
触摸目标必须 ≥48px × 48px，不是建议，是系统级生效阈值
iOS Safari 和 Android WebView（尤其 6–8 版本）会直接忽略小于 48px × 48px 的触控区域。这不是样式“看起来小”，而是浏览器底层判定逻辑：低于该尺寸，touchstart 事件可能不触发、或被识别为滑动而非点击。
- 必须显式设置
min-width: 48px和min-height: 48px，仅靠padding不够——某些 WebView 对内边距的热区映射不准 - 文字内容撑不满高度时，用
line-height: 48px强制垂直居中，比调大font-size更稳 - 图标按钮（如
<i class="icon-menu"></i>）务必单独设width和height，别依赖font-size控制 SVG 或 icon font 大小，否则开启系统缩放辅助时热区塌缩
padding + min-size + touch-action 是稳定组合，缺一不可
真机点不中，八成是这三者没配齐：
-
padding: 12px 16px提供基础容错空间（上下 ≥48px 高度，左右留操作余量） -
min-width: 48px和min-height: 48px是兜底硬约束，防止文字短、图标小时盒模型被压缩 -
touch-action: manipulation加在按钮自身上，告诉浏览器“这里只做点击”，跳过 300ms 延迟和手势识别等待
注意：touch-action: manipulation 在 iOS Safari 13.4+ 才完整支持；旧版本会回退为 auto，但不影响热区尺寸，只影响响应速度。
display 和 box-sizing 错误会导致 padding 形同虚设
默认 <a> 是 display: inline，此时 padding 不扩展点击区：
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: inline-block或display: block -
box-sizing必须为border-box，否则padding会让总宽高超出预期，破坏布局弹性 - 父容器若含
overflow: hidden，会裁掉padding区域——用outline: 1px solid red在真机上快速验证实际响应边界，比开发者工具更准
伪元素 ::before 扩热区是兜底方案，条件苛刻且兼容性差
::before 默认不参与点击热区计算。真要靠它扩展，得同时满足：
- 目标元素（如
<button>）设position: relative -
::before有content: ""、position: absolute、inset: -12px（或等效偏移），且显式声明pointer-events: auto - 父容器不能含
overflow: hidden、transform或will-change: transform
iOS Safari 对伪元素触摸支持极保守：没背景色、没透明度、子元素写了 touch-action: none，都可能导致失效。别一上来就写伪元素——先确保 padding、min-size、touch-action 全部到位。
最常被忽略的一点：所有这些规则，在启用了系统缩放辅助（如 iOS 的“更大字体”或 Android 的“显示大小”）时都会重新校准。热区尺寸必须独立于文字渲染逻辑存在，否则用户调大字号后，按钮就点不中了。
