问题出现得很突然,日志倒是留得挺全。移动端导航链接高 32px 相邻间距 6px 手指经常点错 体验分里点击目标过小这一项扣 12 分 行为数据里跳出率比改版前高 18%

刚开始盯着「图标按钮没有扩大点击热区」,折腾了半个多小时,排掉了。

把日志和配置对完,能解释这个现象的基本就这几处。链接高度低于推荐的 48px。另一种情况是相邻可点击区域间距不足。

不容易想到的是,桌面样式直接复用到移动端。

量一下导航项的实际尺寸

document.querySelectorAll('nav a').forEach(a => console.log(a.getBoundingClientRect()))

随后把点击区域做到 48px

nav a { display:block; min-height:48px; padding:12px 16px; }

相邻项之间留出间距

nav li + li { margin-top: 8px; }

复测移动体验评分

https://search.google.com/test/mobile-friendly

当时还开着另一个排查窗口,两边日志对照着看才定位到。

改完先别撤,确认这几项。导航项高度不小于 48px 误点率下降 体验分回到 85 以上。

这里还有个坑。点击目标不是视觉尺寸 是热区尺寸 图标可以小 但可点范围不能小。拖得越久,排查成本越高,因为现场状态会被后续操作覆盖。

作者 9823189