移动端按钮点不中需优先检查computed尺寸，确保最小触控目标≥44px×44px；应使用box-sizing:border-box、min-width/min-height兜底、clamp()响应式缩放，并避免transform:scale()等伪解决方案。
移动端按钮点不中，先查 computed 尺寸
打开 Chrome DevTools → Elements → Computed 面板，直接看 width、height、padding 的最终值。很多按钮渲染后实际尺寸只有 20px × 24px，远低于 iOS/Android 要求的 44px × 44px 最小触控目标。别凭“看起来大”判断，得看真实像素值。
常见干扰项：
-
display: inline的<input type="button">在旧版 WebView 中会忽略padding-top/padding-bottom - 父容器
overflow: hidden可能裁掉圆角或伪元素扩展区 - 未设
box-sizing: border-box，导致padding额外撑大总尺寸
用 padding + min-height 组合保底线
这是兼容性最好、语义最清晰的做法，不依赖 hack 或 JS。
.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固定值，响应式下容易溢出或挤压
font-size 和 padding 要同步用 rem/vw
固定 px 值在高 DPR 屏幕下物理尺寸缩水，导致点击困难。真正有效的做法是放弃纯 px：
-
font-size: clamp(14px, 2.5vw, 18px)—— 平滑缩放，防过小或过大 -
padding: clamp(0.75rem, 4vw, 1.25rem) 1.5rem—— 保持比例协调 -
min-height: 3rem（≈48px）—— 符合 WCAG 触摸目标建议 - 所有
padding、border-radius、min-height都必须同步用rem/vw/clamp()，否则比例错乱
transform: scale() 别当真尺寸用
transform: scale(1.2) 只改变渲染层，不扩大实际点击热区、不改变布局占位、对屏幕阅读器无效。它适合悬停/点击反馈，但解决不了“点不中”问题。
真正该做的是：
- 把
min-height设为48px（或3rem），并确保box-sizing: border-box - 禁用
user-scalable=no—— 它锁死系统级缩放，反而让低视力用户无法放大整个页面 - 别用
width: 100%套死容器，改用max-width: 320px防止横屏时撑爆
最难的不是“怎么调大”，而是“怎么在各种文字长度、多语言、缩放比例、高对比度模式下都保持可点”。别只盯着像素值，先理清按钮的语义角色和真实触控需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
