直接加padding是最有效解法，但必须配合display:inline-block/block、box-sizing:border-box、min-width/min-height≥44px及touch-action:manipulation，否则真机点不中。
直接加 padding 是最有效、最可控的解法，但必须配合 display 类型、box-sizing 和最小尺寸兜底，否则在真机上依然点不中。
为什么只加 padding 还是点不中
常见错误是：按钮是默认 inline 或未显式设 display，导致 padding-top/padding-bottom 在旧版 Safari 或某些 Android WebView 中被忽略；或者用了 box-sizing: content-box，让 padding 额外撑大总尺寸，触发换行或溢出，反而压缩了实际可触区域。
- 检查 DevTools 的「Computed」面板，确认
height、padding、display是否真实生效 - 对
<button></button>或<a></a>显式写display: inline-block（推荐）或display: block - 所有交互元素统一加
box-sizing: border-box，避免padding破坏布局 - 纯文字链接（
<a></a>）不设display，padding垂直方向无效
padding 加多少才够，怎么适配不同屏幕
iOS 要求最小触控目标为 44px × 44px，Android 推荐 48dp，这不是设计建议，而是系统级判定阈值。单靠固定 px 值在高 DPR 屏幕下物理尺寸缩水，手指实际按不到。
- 基础起手值：
padding: 12px 20px（上下 12px + 行高 ≈ 44px 总高） - 响应式更稳：
padding: clamp(0.75rem, 4vw, 1.25rem)，兼顾小屏不糊、大屏不空 - 必须兜底：
min-width: 44px、min-height: 44px，防止短文本（如“×”“→”）把按钮压扁 - 图标按钮优先用
flex居中 +padding，别只靠line-height撑高，容易被父容器截断
伪元素扩展热区要避开哪些坑
用 ::before 或 ::after 扩展点击区可行，但不是“画得大就点得中”。它本质是覆盖一层透明响应层，浏览器默认不会把事件透传给底层真实元素。
- 父元素必须设
position: relative，否则伪元素脱标错位 - 伪元素必须有
content: ""+position: absolute+top/left/right/bottom定位 - 关键一步：
pointer-events: none必须加在伪元素上，否则它会拦截点击，真实按钮收不到事件 - 不能替代
padding—— 伪元素不参与无障碍识别，屏幕阅读器看不到扩展区域
touch-action: manipulation 到底加在哪、有没有用
它不是万能开关，也不是全局设置项。它的作用是告诉浏览器：“这个元素只用来点击，别等双击缩放、别犹豫手势意图”，从而跳过约 300ms 的延迟。
- 必须加在具体可点击元素上，例如
button { touch-action: manipulation; } - 加在
body或滚动容器上，会导致页面无法垂直滚动 - IE10/11 需补前缀：
-ms-touch-action: manipulation - 禁用
FastClick：两者机制冲突，共存后常出现点不动或事件重复 - 原生
<button></button>默认已有该行为，除非你手动写了touch-action: auto或none
最难的不是把按钮调大，而是在多语言、动态文本、系统字体缩放、高对比度模式下，始终保证计算出的可触区域 ≥ 44px × 44px —— 所有尺寸单位、padding、min-height、font-size 必须同步用 rem 或 clamp()，缺一环，真机上就可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
