报错是这么冒出来的。移动端列表的「更多」按钮之间只有 8px 间距,相邻两个链接经常点错。移动适配检测提示点击目标过密,跳出率同时涨了一截。

中间走过弯路,把「列表项的内边距在窄屏被媒体查询压掉」当成主因,改完现象没变。

这类报错背后常见的原因有几处,逐个排除就行。按钮是行内元素,行高不够撑开间距。也可能是图标和文字拆成两个链接,中间只留 8px。

不容易想到的是,设计稿按桌面比例标注,没按手指尺寸。

数一下同一行的可点击元素

curl -s https://m.example.com/list/ | grep -o 'class="more"' | wc -l

随后把可点区域扩到 48px

padding: 12px 16px; min-height: 48px;

接着合

并

真

机

怎么算真的好了,看的是同一批现象。调整后误点投诉消失,移动端单页停留时间涨了两成,适配检测的密排提示也不再出现。

这里还有个坑。48px 是手指点击的舒适下限,视觉上可以小,但可点区域不能用外边距去挤。报错文案容易误导,真正的原因往往在相邻那一层的日志里。

作者 9823189