直接加padding是最有效、最兼容的解法，但必须设display:inline-block或block，避开touch-action:none、pointer-events:none等干扰项，并确保热区≥44×44px。
直接加 padding 是最有效、最兼容的解法，但必须配合正确的 display 类型和避开几个关键 CSS 干扰项，否则在 iOS Safari 或安卓 WebView 中依然点不中。
为什么只设 font-size 或 width/height 不行
文字变大 ≠ 点击区域变大；font-size 只影响内容渲染，不扩展元素的可响应边界。width/height 对 <button></button> 这类替换元素（replaced element）在部分浏览器中甚至被忽略。真正决定点击热区的是元素的 content box + padding box，而 margin 完全不参与事件捕获。
- iOS Safari 要求最小触控目标为 44×44px，仅靠文字撑开的
<button></button>实际高度常只有 16–20px -
line-height在父容器overflow: hidden或高度受限时会被截断，无法保证底部留白 - 用
transform: scale()模拟放大会导致点击偏移、文字模糊，且不增加真实热区
button 的 display 类型必须设为 inline-block 或 block
<button></button> 默认是 display: inline-block，但一旦被重置为 display: inline，部分旧版 Safari 和 Android WebView 会忽略 padding-top/padding-bottom，垂直热区直接缩水一半。
- 显式声明
display: inline-block或display: block，确保padding生效 - 移动端建议加
min-height: 44px，比单纯依赖padding更稳（尤其文字短时） - 避免用
width: 100%配合inline—— 布局易塌陷，热区不可控
哪些 CSS 会让 padding 失效或点击静默
即使 padding 写对了，以下样式仍会导致真机上“看起来能点、实际没反应”：
-
touch-action: none：禁用浏览器默认点击穿透，label 或 button 无法把事件“嫁接”到内部控件 -
user-select: none：某些 Android WebView 下会连带抑制click冒泡；应改用-webkit-user-select: none+-moz-user-select: none -
pointer-events: none或其任意父级设置了该值：直接切断事件流，outline 都不会触发 -
overflow: hidden父容器裁切圆角区域：视觉上看到按钮，但热区被截断，尤其用border-radius时
label 包裹 checkbox/radio 时的特殊处理
这是唯一无需 JS、无障碍天然支持、热区自动扩大的方式，但结构和样式约束极强：
- 必须是
<label><input type="checkbox">文字</label>，input必须是label的直接子节点，中间不能有span、div或 Fragment -
input不能是display: none或visibility: hidden；可用opacity: 0; position: absolute;移出视口 -
label默认是inline，需加display: inline-block+padding: 12px 16px+min-height: 44px显式撑开热区 - 若用
flex，必须加align-items: center，否则input可能被挤出热区范围
最容易被忽略的点是：真机测试前不检查 computed styles 中的 pointer-events 和 touch-action 值，而是凭 DevTools 模拟器“看起来能点”就上线——结果在 iOS 上大面积失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
