移动端按钮触控区需≥44×44px，必须设padding+min-width/min-height、display:block/inline-block、box-sizing:border-box，并规避touch-action:none、overflow:hidden、pointer-events:none等干扰项。
手机端可点击区域太小，不是“点不中”，而是浏览器根本没把手指落点算进热区——padding 有效，但必须配对正确的 display 和避开几个关键 CSS 干扰项，否则在 iOS Safari 或安卓 WebView 中依然静默失效。
button 的 display 必须设为 inline-block 或 block
<button></button> 默认是 display: inline-block，但一旦被 CSS 重置为 display: inline，部分旧版 Safari 和 Android WebView 会忽略 padding-top/padding-bottom，垂直热区直接缩水一半。
- 显式声明
display: inline-block或display: block，确保padding生效 - 避免用
width: 100%配合inline—— 布局易塌陷，热区不可控 - 移动端建议加
min-height: 44px，比单纯依赖padding更稳（尤其文字短时）
label 包裹 checkbox/radio 时的结构约束
这是唯一无需 JS、无障碍天然支持、热区自动扩大的方式，但结构和样式容错率极低：
- 必须是
<label><input type="checkbox">文字</label>，input必须是label的直接子节点，中间不能有span、div或 Fragment -
input不能是display: none或visibility: hidden；可用opacity: 0; position: absolute;移出视口 - 避免在
label内包裹div等块级容器，否则失去点击穿透能力
哪些 CSS 会让 padding 失效或点击静默
即使 padding 写对了，以下样式仍会导致真机上“看起来能点、实际没反应”：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
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时
移动端最小触控目标必须 ≥ 44×44px
iOS Safari 要求最小触控目标为 44×44px，仅靠文字撑开的 <button></button> 实际高度常只有 16–20px；line-height 在父容器 overflow: hidden 或高度受限时会被截断，无法保证底部留白。
-
font-size或width/height不等于点击区域变大——真正决定热区的是 content box + padding box -
margin完全不参与事件捕获，不能用来扩展可点击范围 - 用
transform: scale()模拟放大会导致点击偏移、文字模糊，且不增加真实热区
最容易被忽略的一点：所有扩展热区的操作，都建立在元素本身能正常接收事件的前提下——如果父级设置了 pointer-events: none 或 touch-action: none，再大的 padding 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
