最可靠解法是加padding并设display:inline-block或block；仅调font-size或width/height无效，因点击热区由content+padding决定，margin不参与事件捕获。
直接加 padding 并设 display: inline-block 或 display: block，是最可靠、最兼容的解法；其他方式要么无效，要么在 iOS Safari 或安卓 WebView 中点不中。
为什么只调 font-size 或 width/height 不行
文字变大 ≠ 点击区域变大。font-size 只影响内容渲染，不扩展元素的可响应边界；width/height 对 <button> 这类替换元素，在部分浏览器中会被忽略。真正决定点击热区的是 content box + padding box，而 margin 完全不参与事件捕获。
常见错误现象：
- 按钮视觉上“看起来够大”，但手指点边缘没反应
- 真机测试时，只有文字正下方能触发，上下留白区域点不中
- iOS Safari 报告 “touch target too small” 警告（即使 DevTools 显示尺寸达标）
padding 生效的前提：必须控制 display 和排除干扰样式
<button> 默认是 display: inline-block，但一旦被 CSS 重置为 display: inline，旧版 Safari 和某些 Android WebView 会直接忽略 padding-top/padding-bottom，垂直热区缩水一半。
立即学习“前端免费学习笔记（深入）”；
必须显式声明：
-
display: inline-block或display: block -
padding: 12px 16px（移动端建议 ≥12px 垂直内边距） -
min-height: 44px（比单靠 padding 更稳，尤其文字极短时）
同时避开这些会让点击静默的样式：
-
touch-action: none：禁用浏览器默认点击穿透，label 或 button 无法把事件“嫁接”到内部控件 -
pointer-events: none（或其任意父级设置了该值）：直接切断事件流 -
overflow: hidden的父容器：会裁切圆角区域，导致热区被截断
用 <label> 包裹 input[type="checkbox"] 或 input[type="radio"] 的特殊优势
这是唯一无需 JS、无障碍天然支持、热区自动扩大的方式——整个 <label> 渲染盒（含文字、空白、图标）都会被映射为控件点击热区，iOS Safari 和 Android WebView 会自动将其提升至 ≥44×44px。
但必须满足三个硬性条件：
-
input是label的**直接子节点**（中间不能有<span>、<div>或 Fragment） -
input不能是display: none或visibility: hidden；可用opacity: 0; position: absolute;移出视口 -
label本身要有可渲染尺寸：需设display: inline-block+min-height: 44px+padding
验证方法：临时加 outline: 1px solid red 到 label，看是否完整包裹内容；再检查 computed styles 中 pointer-events 和 display 值。
移动端真机测试前必须确认的三件事
很多问题只在真机上暴露，开发工具里看不出：
- 用 Safari 开发者工具连 iPhone，查看
Computed面板中clientWidth×clientHeight是否 ≥ 44×44px（不是offsetWidth，它含 border） - 检查是否有父级设置了
touch-action: none或user-select: none（后者在某些 Android WebView 中会抑制 click 冒泡） - 若用了 Flex 布局，确认
align-items是center，否则input可能被挤偏出热区范围
最常被忽略的点是：开发者以为 padding 写对了就万事大吉，却没意识到 display 类型错配或 touch-action 干扰已在底层切断事件路径——这种问题不会报错，只会让按钮“看起来能点、实际没反应”。
