问题出现得很突然,日志倒是留得挺全。移动端加了一个固定底部的 tab 导航,高度 64px,正文区域没有补内边距。文章最后两行被挡住,用户滑到底也看不全,滚动深度统计显示完成率从 78% 掉到 39%,跳出率同步上升。

刚开始盯着「弹层展开时底部栏高度变化 预留的间距没有跟着更新」,折腾了半个多小时,排掉了。

这类报错背后常见的原因有几处,逐个排除就行。固定定位元素脱离文档流 正文容器没有预留等高的下边距。另一种情况是安全区适配只写了 iOS 的 env() 安卓手势条同样遮挡。

少数情况下是正文最后一屏还有评论框 叠加后遮挡区域接近 140px。

量出底部栏与正文的实际重叠高度

curl -s https://www.example.com/post/123 | grep -o 'padding-bottom:[^;]*' | head -3

给正文容器加等高内边距

article { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

接着安卓端补上手势条高度

article { padding-bottom: calc(64px + 24px); }

等前面都确认过,再用浏览器视口模拟核对最后一屏

curl -s -o /dev/null -w '%{size_download}\n' https://www.example.com/post/123

别只看报错消失,验证要多做一步。补上内边距后最后一屏完整可见,滚动深度统计的完成率回到七成以上,评论区的点击也随之上升。

这里还有个坑。固定底栏的遮挡在桌面调试时看不出来,必须在真机上滑到底确认,否则内容缺失会直接影响转化。监控比日志更早给出信号,事后回看经常能提前半小时发现异常。

作者 9823189