移动端点击热区最小应该做到多大?

手机上点那些小图标，明明看着在按钮里，手指却总点偏，或者干脆触发了旁边的功能。这事儿怪不得图标画得小，怪的是可点击区域跟视觉尺寸一模一样——浏览器做命中测试认的是元素的渲染盒，图标在盒子里画得多满都不影响判定。

一个 20 像素见方的按钮，里面的 SVG 即使填满整个盒子，用户能点中的也就这 20 像素；反过来，图标只画中央一小块，只要盒子够大，点边缘空白也管用。命中区域的上界是元素的 border box（含 padding），跟盒子里装了什么没关系。

扩热区纯 CSS 就能搞定，主流有两条路。一是用伪元素在盒子外面贴一圈隐形区域，比如给宿主加 position: relative，再写个 ::before { content: ""; position: absolute; inset: -10px; }。伪元素不占文档流，溢出多少相邻元素毫无知觉，点上去等于点按钮。但这招有前提：宿主得建立定位上下文，content 不能省，得防着 pointer-events: none 被继承，祖先链上还不能有 overflow: hidden，否则热区直接被裁掉。

二是直接加 padding 配合 box-sizing: border-box。把外尺寸钉死，比如 width: 40px; height: 40px; padding: 10px;，元素占位永远 40 像素，padding 只是把内容区压小，布局完全可控。如果原本靠内容撑开，加 padding 会撑大盒子，想抵消布局影响可以用负 margin 对冲：padding: 10px; margin: -10px;。代价是相邻盒子开始重叠。

重叠点击在密集工具栏里最明显。两边各向外扩 10 像素，热区必然重叠，谁响应点击由层叠关系决定，用户点中间空白触发哪个近乎随机。习惯上把单侧扩展量控制在相邻间距的一半以内，超过这限度不如把图标盒子本身做大。

响应式断点上伪元素方案省心，把扩展量抽成自定义属性，触屏设备加大、桌面端收紧，一处改动全局生效。padding 方案要同步调 padding 和对冲 margin，数值一多容易漏改。

最后泼点冷水：热区不是越大越好。删除按钮挨着“更多”按钮时，多扩出去的几像素吞掉的可能是想点“更多”的用户；大面积隐形热区还会让人困惑“明明点的是空白怎么触发了操作”。破坏性操作热区扩得克制点，普通导航可以大方些；扩展量尽量与视觉留白对齐，别越过两个控件中点。改完一定要在真机上用拇指实际点一遍，屏幕边缘、角落、快速连点都试试，误触问题只有真机上才暴露得出来。