最小可触控尺寸为44px×44px，应优先用padding扩展点击热区而非width/height；需确保元素为block/inline-block、无pointer-events:none遮挡、配合min-width/min-height兜底，并添加role="button"和touchstart监听以兼容iOS Safari。
触控区域太小导致点击失败
移动端手指点击精度有限，44px × 44px 是 Apple 和 Google 都建议的最小可触控尺寸。如果按钮本身只有 20px 高，光靠元素自身尺寸根本不够——这时候不能只加 font-size 或强行拉宽容器，得用 padding 从内部撑开可点击范围。
- 直接改
width/height可能破坏布局流，尤其在 Flex/Grid 容器里容易挤压邻居元素 -
padding扩展的是「点击热区」，不影响视觉内容大小，也不触发重排（相比transform: scale()更轻量） - 注意：若按钮有
border或background裁剪（比如overflow: hidden），padding 区域可能不响应点击，得检查父级是否截断了事件冒泡
CSS padding 不生效的常见原因
写了 padding: 12px 20px 却发现点击还是不准，大概率是元素没真正“接收”到触摸事件。
- 元素是
inline类型（如<span>、<a>默认），padding在垂直方向无效——必须先设display: inline-block或block - 父容器设置了
pointer-events: none，或子元素被z-index遮挡（比如悬浮菜单盖住了底部按钮） - 用了
touch-action: manipulation但没配cursor: pointer，部分安卓浏览器会忽略 padding 区域的点击
padding 和 min-width/min-height 的配合使用
单纯靠 padding 撑开热区，在文字极短时（比如 “X” 关闭按钮）容易让热区过窄。这时要加兜底限制。
- 给按钮加
min-width: 44px和min-height: 44px，确保即使内容为空也有基础尺寸 - 如果按钮文字长度波动大（如 “加载中…” → “完成”），优先用
padding+min-width，别依赖width: 100%—— 它会让小屏上按钮过宽、挤占空间 - 避免同时设
padding和width/height固定值，否则实际尺寸 = 内容 + padding + border，容易溢出容器
兼容 iOS Safari 的点击延迟与穿透
iOS Safari 对非可点击元素（如 div）的 click 事件有约 300ms 延迟，且 padding 区域可能被判定为“非激活区”，导致点不中。
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
role="button"并监听touchstart，比等click更可靠 - 确保元素有
cursor: pointer和-webkit-tap-highlight-color: transparent，否则点击反馈错位 - 如果用了
position: absolute覆盖在其他元素上，padding 区域可能被底层元素拦截——加z-index和pointer-events: auto显式声明
router-link、v-button 这类封装组件里时，外层 wrapper 可能吞掉了事件。点不中的时候，先用浏览器 devtools 的「Toggle device toolbar」+ 「Emulate touch events」验证下真实热区范围。 
