按钮点击区域太小的根本原因是未满足44×44px触控标准，应优先用padding: 12px 24px扩展热区，并显式设置min-height: 44px、display: inline-block，配合touch-action: manipulation和真机测试确保点击有效。
按钮点击范围太小，不是“看起来小”，而是用户真点不中——根本原因是 CSS 没给够可交互的物理空间，和字体大小、文字内容长度无关。
button 的 padding 和 min-height 必须显式设够 44px
移动端触控目标最低标准是 44×44 CSS 像素，但很多按钮只靠文字撑开，padding 为 0 或 4px，min-height 没设，导致 computed height 实际只有 20–28px。
-
padding是首选扩展方式：用padding: 12px 24px比固定width/height更安全，适配不同文字长度 - 必须加
min-height: 44px，否则短文本按钮在窄屏下仍可能被压缩 - 避免
display: inline：它会让padding-top/padding-bottom在旧版 Safari/Android WebView 中失效 - 推荐声明
display: inline-block或display: block，并配vertical-align: middle防基线错位
::after 伪元素扩展点击层要配 pointer-events: auto
当无法改原始 HTML 结构（比如第三方组件封装了 <button>），用伪元素盖一层“隐形热区”最稳妥，但漏掉关键属性就会完全失效。
- 父元素必须设
position: relative -
::after要有content: ""、position: absolute，再用top/left/right/bottom扩出额外空间（如各方向 -8px） - 必须写
pointer-events: auto：默认值是auto，但一旦父元素或祖先设过pointer-events: none，伪元素会继承，必须显式重置 - 别忘了
z-index: 1，确保不被相邻元素遮挡
包裹容器法要注意事件委托与尺寸继承
把 <button> 包进 <div class="click-wrapper"> 看似简单，但容易因 display 类型或盒模型导致点击区域“虚高”或“塌陷”。
立即学习“前端免费学习笔记（深入）”；
- 容器需设
display: inline-block（不是block），否则会独占一行，破坏行内布局 -
min-width和min-height必须直接写在容器上，不能只靠内部按钮撑开 - 监听事件要绑定在容器上，再用
event.target === buttonEl判断来源，避免误触发 - 如果容器用了
flex或grid，检查是否被overflow: hidden截断圆角区域——这会砍掉实际可点击边缘
移动端必须配对设置 touch-action 和 tap highlight
即使尺寸达标，iOS Safari 仍可能响应迟钝或无反馈，本质是浏览器对触摸事件的默认策略没对齐。
-
touch-action: manipulation是关键：它告诉浏览器“这是点击操作，别等 300ms 延迟，也别尝试双指缩放” -
-webkit-tap-highlight-color不能设transparent后就不管——必须搭配足够padding，否则用户点下去毫无视觉确认 - 绝对不要写
touch-action: none：这等于主动禁用所有原生点击，click事件将永远不会触发 - 在
@media (hover: hover)中可关掉 tap highlight，但默认移动样式里必须保留
最容易被忽略的是：开发者常在 Chrome DevTools 里看“Layout”面板确认尺寸达标，却没切到真机或模拟器验证 touch 事件是否真正分发到元素——computed size 对，pointer-events 错，照样点不中。
