最稳解法是加padding并设display:inline-block或block，但须避开touch-action:none、pointer-events:none和overflow:hidden；仅调font-size或width/height无效，因点击热区由content box+padding box决定，margin不参与事件捕获。
直接加 padding 并设 display: inline-block 或 block，是最稳、最兼容的解法；但必须避开 touch-action: none、pointer-events: none 和 overflow: hidden 这三类干扰项，否则 iOS Safari 或安卓 WebView 仍会点不中。
为什么只调 font-size 或 width/height 不行
文字变大 ≠ 点击区域变大。font-size 只影响内容渲染，不扩展元素的可响应边界；width/height 对 <button></button> 这类替换元素，在部分浏览器中甚至被忽略。真正决定点击热区的是元素的 content box + padding box，而 margin 完全不参与事件捕获。
- iOS Safari 要求最小触控目标为
44×44px，仅靠文字撑开的<button></button>实际高度常只有16–20px - 父容器设了
overflow: hidden或高度受限时，line-height会被截断，底部留白无法保障 - 用
transform: scale()模拟放大，会导致点击偏移、文字模糊，且不增加真实热区
padding 必须配合 display 和 box-sizing
<button></button> 默认是 display: inline-block，但一旦被重置为 display: inline，部分旧版 Safari 和 Android WebView 会忽略 padding-top/padding-bottom，垂直热区直接缩水一半。
- 纯行内元素（如默认
<a></a>、<span></span>）必须先设display: inline-block或display: block，否则垂直方向padding无效 - 推荐起手值：
padding: 12px 20px（上下12px≈24px+ 文字行高 ≈44px总高） - 必须加
box-sizing: border-box，否则padding会额外撑大总宽高，导致换行、溢出或覆盖相邻元素
伪元素扩展热区：什么时候该用，怎么避坑
当设计明确要求“视觉尺寸小但可点区域大”（比如一个 24×24px 的关闭图标），padding 会破坏视觉，这时伪元素是更干净的解法。
- 伪元素需设
content: ""+position: absolute+inset: -10px（或top/left/right/bottom）来扩展热区 -
pointer-events: none必须加在伪元素上，否则它会拦截事件，挡住真实元素 - 真实元素（如
<button></button>）要保留pointer-events: auto（默认值） - 父容器最好有
position: relative，避免伪元素脱标错位 - 最常翻车的是 iOS Safari 的“点击穿透”：伪元素扩出的热区若覆盖下方另一个可点击元素（如悬浮菜单里的按钮叠在导航栏上），可能误触发下层元素
<label></label> 包裹 input 是 checkbox/radio 的最优解
对于 input[type="checkbox"] 或 input[type="radio"]，原生尺寸约 13×13px，远低于 44×44px 推荐值。<label><input>文字</label> 是唯一无需 JS、不依赖 id、无障碍天然支持、且热区自动扩大的方式。
-
input必须是label的**直接子节点**，中间不能插<div>、<code><span></span> - 禁用
pointer-events: none、touch-action: none、user-select: none—— 这三者在某些 Android WebView 中会连带抑制 click 事件冒泡 - 若用 flex 布局，加
align-items: center防止input被挤出可点击范围 - 被关联的
input不能是display: none或visibility: hidden；可用position: absolute; opacity: 0移出视口，但得确保 DOM 中存在且未被父级overflow: hidden切掉
真机测试前最容易漏掉的，是 touch-action: none 这个 CSS 干扰项——它会让 label 无法把事件“嫁接”到 input 上，导致整个热区失效。哪怕结构和样式都对，只要父级或自身写了这一条，iOS Safari 就大概率静默失败。
