直接给 button 或带 role="button" 的元素加 padding 并设 box-sizing: border-box，即可真实扩大点击区域，因浏览器将 content box 与 padding box 视为可点击热区，margin 不参与；button 默认 inline-block，padding 天然生效，无需额外 display 设置。
直接给 button 或带 role="button" 的元素加 padding，并确保 box-sizing: border-box，是最简单、最可靠的方式。其他花招（比如伪元素盖层、pointer-events: none 套娃）反而容易失效。
为什么 button 加 padding 就能扩大点击区域
浏览器把元素的 content box + padding box 当作默认可点击热区，margin 不算在内。所以只要 button 是块级或 inline-block 行为，加 padding 就真实扩展了响应范围——不是视觉错觉，是底层事件坐标映射变了。
-
button默认是display: inline-block，padding天然生效；若被重置为display: inline，则padding-top/bottom在旧版 Safari 或某些 WebView 中可能被忽略 - 必须确认
box-sizing是border-box（现代浏览器默认），否则加padding会让总尺寸超出预期，尤其在flex或grid容器中引发换行或溢出 - 别用
font-size或line-height“凑”高度——它们不改变热区边界，iOS Safari 下实际可点高度可能只有 16px
label 包裹 input 时点击区域怎么才算真正扩大
label 扩大热区不是靠 CSS，而是浏览器原生行为：当 input[type="checkbox"] 或 input[type="radio"] 是 label 的**直接子节点**时，整个 label 渲染盒（含文字、空白、图标）都会映射到控件上。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 结构必须是
<label><input></label>，中间不能插span、div，也不能是 React/Vue 的 Fragment 或条件渲染后动态挂载但没嵌套进label的情况 -
label默认是display: inline，无宽高，光写标签没用——得加display: inline-block和padding或min-height: 44px显式撑开 - 避免
pointer-events: none、touch-action: none、user-select: none等样式，这些在 iOS Safari 或 Android WebView 中会静默阻断热区传导
用伪元素 ::after 扩展热区要注意什么
伪元素可以“无感”扩大点击区域，但必须满足三个硬性条件，否则白搭：
- 伪元素必须设
position: absolute并覆盖目标区域（如top: -10px; left: -10px; right: -10px; bottom: -20px），且父元素需有position: relative或其他定位上下文 - 伪元素必须设
pointer-events: auto（默认是auto，但若父级设了none会被继承） - 不能给伪元素设
z-index: -1或让其他层遮挡它——热区必须在最上层才能捕获触摸事件
移动端真机测试前必查的三处 CSS 干扰
即使 HTML 结构和 padding 都对，以下 CSS 仍会让点击在 iOS Safari 或 Android WebView 中完全失灵：
-
touch-action: none出现在button、label或任意父容器上——它会禁用浏览器对点击事件的默认穿透逻辑 -
overflow: hidden切掉了圆角区域或伪元素伸出部分，导致热区被物理截断 - 父级设置了
pointer-events: none，或者因z-index错乱被其他绝对定位元素（如广告 banner、toast 提示）盖住
复杂点在于：这些干扰项往往不报错、不警告，只在真机上“点不动”，而且不同系统表现还不一致。最稳妥的做法是，加完 padding 后，用 Safari Web Inspector 连真机，打开「Elements」→「Computed」，逐层检查 pointer-events、touch-action 和 display 的最终计算值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
