触控热区必须≥48px×48px，是系统级生效阈值；需同时设置padding、min-width/min-height、touch-action: manipulation，并确保display为block/inline-block且box-sizing为border-box，否则真机点不中。
移动端小屏幕下触控热区不达标，不是“看起来小”，而是系统级拦截——iOS Safari 和 Android WebView（尤其 6–8 版本）会直接忽略 touchstart 事件，哪怕你写了 onclick 绑定也白搭。必须让浏览器认定该区域“可交互”，且尺寸 ≥48px × 48px。
为什么 padding + min-width/min-height 是硬性组合？
仅靠 padding 不保险：某些 WebView 对行内元素的内边距热区映射不准；仅靠内容撑开更危险——短文本按钮（如“×”“→”）在窄屏下可能被压缩到 width: auto 算出 28px，远低于 48px 下限。
-
padding: 12px 16px提供基础容错空间（上下 ≈ 48px 高度，左右留操作余量） -
min-width: 48px和min-height: 48px是兜底强制约束，防止盒模型被压缩 - 二者缺一不可：没
min-值，padding在极端窄屏或缩放辅助开启时会失效
display 和 box-sizing 错在哪，真机会直接点不中
默认 display: inline 的 a 或 span 按钮，加了 padding 也几乎没用——垂直方向 padding 不扩展点击区，浏览器只认 content box + padding box，但前提是盒模型得“存在”。
- 必须设
display: inline-block或display: block -
box-sizing必须为border-box：否则padding会让总宽高超出预期，父容器若含overflow: hidden就会裁掉响应区域 - 验证方法：真机上加
outline: 1px solid red，看红色框是否完整包住 padding 区域；开发者工具里看到的不作数
touch-action: manipulation 不是锦上添花，是开关
它不扩大热区，但决定扩出来的区域能不能被浏览器“当真”。没加它，iOS Safari 仍可能触发 300ms 延迟、误判为滑动，甚至在快速连点时丢事件。
- 必须加在按钮自身（如
button或带role="button"的div），加在父容器无效 - 检查祖先节点是否写了
touch-action: none（常见于轮播图、滚动容器），它会直接阻断子元素所有触摸行为 - iOS Safari 13.4+ 才完整支持；旧版本回退为
auto，不影响热区尺寸，只影响响应速度
最容易被忽略的是父容器的 overflow: hidden 和 transform——它们会无声裁掉 padding 区域，且伪元素 ::before 在 iOS 上对这些限制极其敏感。别指望模拟器，必须在 iPhone SE（320px）、Pixel 7（412px）、iPad mini（768px）三台真机上分别点十次以上验证反馈是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
