列表每行右侧的小图标只有二十来像素宽,手指按下去常常落到旁边那一行,误删数据的情况一周能碰上两三次,用户自己都说不清是怎么点错的。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,可点区域等于图标本身的尺寸,视觉留白没算进命中范围,手指接触面比鼠标指针大得多,两个操作挨得近就必然点偏,且越急越容易错。
碰到「触控目标尺寸」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。别只看报错的最后一行,往上看几行,真正的起因通常在上面。
.icon-btn{padding:12px;min-width:44px;min-height:44px}
.icon-btn::after{content:'';position:absolute;inset:-6px}
<button class='icon-btn' aria-label='删除'>×</button>
具体做法是,用内边距把可点区域撑到至少 44 像素,别只放大图标;相邻两个操作之间留出 8 像素以上的空隙,别贴着摆;需要时用伪元素向外扩热区,视觉尺寸保持不变。
最后用这个标准收尾,单手拇指连续点十次删除,没有一次落到相邻的那一行上,误触明显减少。
