问题出现得很突然,日志倒是留得挺全。商品详情页的详情图是 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; }
怎么算真的好了,看的是同一批现象。加上自适应约束后横向滚动条消失,移动端的平均停留时长回升,报告里的不适配提示也清空。
溢出问题多半来自后台直接粘贴的原图,最好在图片上传时就生成一组适配尺寸,别指望前端兜底。同一份配置在测试环境跑通,不代表线上没事,两边的默认值经常不一样。
