移动端按钮点不中主因是触控区域不足：需确保 display 非 inline、box-sizing 为 border-box、父容器未 overflow: hidden 裁剪 padding，配合 min-width: 44px、padding ≥12px 及 touch-action: manipulation 才可靠生效。

移动端按钮点不中，八成不是手抖，是 padding 没给够，且没配合 min-width 和 touch-action 一起用。

为什么只加 padding 还是点不准

常见错误是只写 padding: 12px 20px 就完事，但忽略三个关键前提：

• display 不是 inline（比如 a 标签默认就是 inline，padding 不生效，必须加 display: inline-block 或 display: block）
• box-sizing 不是 border-box（若为 content-box，padding 会额外撑大总宽，导致布局错乱，而你可能误以为“padding 没起作用”）
• overflow: hidden 父容器裁掉了 padding 区域（开发者工具里高亮元素时，蓝色框没包住内边距，就是被裁了）

移动端 padding 值怎么选才靠谱

别套用桌面端数值。真机测试验证过的安全组合是：

• 基础值：padding: 12px 16px（上下保证 ≥44px 高度，左右留出拇指容错）
• 图标按钮或短文字（如“→”“⋮”）：补 min-width: 44px，否则视觉窄、热区窄
• 用 rem 更稳妥：padding: 0.75rem 1rem（根字体设为 16px 时等价于上一档，缩放友好）
• 避免 padding: 4px 24px 这类上下过窄的写法——手指垂直落点误差远大于水平

touch-action: manipulation 不是可选项

它不负责“扩大热区”，但决定你扩出来的热区能不能被浏览器当真：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 没它，iOS Safari 可能对小按钮降级处理，哪怕 padding 已满 44px，仍触发 300ms 延迟或误判为滑动
• 只加在按钮本身，别加到父容器（比如轮播图外层加了 touch-action: none，子按钮再怎么设也没用）
• 老版本 Safari（manipulation，但会 fallback 到 auto，不影响基础功能；微信 6.x 内置 WebView 需搭配 cursor: pointer 才更稳
• 如果按钮里含 img，检查子元素是否意外写了 touch-action: none——会拦截冒泡

伪元素 ::before 扩热区比 padding 更灵活？先看这三处

用 ::before 的前提是：你已确认 padding 会破坏现有布局（比如紧凑导航栏里按钮挤变形）。但它不是银弹：

• 必须设 position: relative 在按钮上，否则 ::before 无法精确定位
• z-index 要高于兄弟元素，否则被遮挡——尤其注意父容器 overflow: hidden 会直接截断伪元素渲染
• 真机失效常因没加 pointer-events: auto（某些 Android WebView 默认禁用伪元素点击）
• 推荐写法：::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: auto; }，比 transform: scale() 更可控、无模糊风险

最易被跳过的细节：所有涉及点击的元素，box-sizing: border-box 必须显式声明；否则高 DPR 屏幕下，你写的 44px 实际物理像素可能只有 22px，连苹果人机指南的底线都达不到。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！