按钮点不中是因为padding、min-width和min-height未达标，导致实际触控区域小于44×44px；需检查computed尺寸，优先用padding+min-width/min-height+box-sizing:border-box组合，并设置touch-action:manipulation和-webkit-tap-highlight-color。
为什么按钮点不中？先看 computed 尺寸
按钮点不中，90% 是因为 padding、min-width 和 min-height 没设够，而不是“看起来小”。打开 Chrome DevTools → Elements → Computed 面板，直接查 width、height、padding 的最终值。很多按钮渲染后实际尺寸只有 20×24px，远低于 W3C 推荐的 44×44px 触控最小目标。
特别注意：display: inline 的按钮在旧版 Safari 或 Android WebView 中会忽略 padding-top/padding-bottom；如果用了 float 又没清除，外层容器塌陷也会间接压缩点击区。
- 用
display: inline-block或display: block替代inline - 避免仅靠
font-size去“撑大”按钮——文字变大 ≠ 点击区域变大 - 检查父容器是否设置了
overflow: hidden，它可能裁掉圆角或伪元素扩展区
最稳妥：padding + min-width/min-height 组合
这是兼容性最好、语义最清晰的做法。不用 hack，不依赖伪元素或 JS，所有浏览器都认。
关键不是“加多少 padding”，而是确保最终热区 ≥ 44×44px。例如：
.btn {
padding: 12px 20px;
min-width: 44px;
min-height: 44px;
box-sizing: border-box;
}
-
padding提供基础热区，适应文字长度变化 -
min-width/min-height是兜底——哪怕内容为空或极短，也强制满足最小触控尺寸 -
box-sizing: border-box必须加上，否则padding会额外撑大总尺寸 - 别用
width/height固定值，否则响应式下容易溢出或挤压
伪元素扩展法：适合不能改 HTML 结构时
当按钮是第三方组件或嵌套深、无法加 wrapper，可用 ::after 扩展一层不可见但可点的覆盖层。
必须配齐三要素，缺一不可：
.btn {
position: relative;
}
.btn::after {
content: "";
position: absolute;
top: -8px;
left: -8px;
width: calc(100% + 16px);
height: calc(100% + 16px);
pointer-events: auto;
z-index: 1;
}
-
position: relative是前提，否则::after会相对 body 定位 -
pointer-events: auto必须显式声明——伪元素默认不响应事件 -
z-index要高于相邻元素，否则被遮挡就白扩了 - 扩展量建议 ±8px，太大易误触邻近控件
移动端必须加的两个 CSS 属性
即使尺寸达标，iOS Safari 仍可能延迟响应或点不动——缺了这两个属性，等于没做完。
touch-action: manipulation 告诉浏览器：“这是个按钮，别等双击缩放，直接分发点击”。-webkit-tap-highlight-color 控制点击高亮色，设为半透明白色或灰色，既提供反馈又不突兀。
.btn {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
- 禁用
-webkit-tap-highlight-color: transparent后，务必保留足够padding，否则用户完全感知不到点击是否生效 - 绝对不要写
touch-action: none，这会彻底禁用原生点击行为 - 真机测试时，关闭 Chrome DevTools 的「Emulate touch events」，用手指实点验证反馈是否即时
真正容易被忽略的，是把“视觉尺寸”和“触控热区”当成一回事——前者管好看，后者管能点中。热区必须独立测量、独立保障，不能靠设计师说“这个按钮够大了”就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
