问题出现得很突然,日志倒是留得挺全。商品详情页的详情图是 1200px 宽,移动端出现横向滚动条,用户需要左右拖动才能看全文字。

刚开始盯着「表格宽度按像素固定,小屏下被撑开」,折腾了半个多小时,排掉了。

排查方向其实有限,先把可能性排一排。正文图片写死了 width 属性,没有设置 max-width。另一种情况是编辑器插入的是原图,没有生成响应式尺寸。

少数情况下是代码块的长命令不换行,把容器整体拉宽。

先统计正文里超宽的元素

curl -s https://www.example.com/p/1 | grep -o 'width="[0-9]\{4,\}"' | head

给图片和表格加自适应约束

img, table { max-width: 100%; height: auto; }

给代码块加横向滚动而不是撑开页面

pre { overflow-x: auto; word-break: break-all; }

怎么算真的好了,看的是同一批现象。加上自适应约束后横向滚动条消失,移动端的平均停留时长回升,报告里的不适配提示也清空。

溢出问题多半来自后台直接粘贴的原图,最好在图片上传时就生成一组适配尺寸,别指望前端兜底。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。

作者 9823189