记录一下那天晚上的排查过程。移动适配检测提示内容宽度超出视口。用 320px 宽模拟,商品对比表格宽度 780px,整页出现横向滚动条,右侧内容完全看不到。
刚开始盯着「对比模块的图片没设 max-width,撑开了容器」,折腾了半个多小时,排掉了。
把日志和配置对完,能解释这个现象的基本就这几处。表格用了固定列宽,没有做横向滚动容器。少数情况下是页面 meta viewport 的 width 设成了 750,缩放后仍溢出。
还有一种情况,媒体查询断点只写到 375px,320px 没覆盖。
量一下实际溢出宽度
curl -s https://www.example.com/compare | grep -c 'width="780"'
给表格外层加横向滚动容器
<div style="overflow-x:auto;-webkit-overflow-scrolling:touch;">
补 320px 的断点
@media (max-width:359px){.compare-table{font-size:12px}}
复测页面是否还有横向滚动
curl -s -A 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0)' https://www.example.com/compare | grep -c viewport
改完先别撤,确认这几项。320px 下整页不再出现横向滚动,对比表格可以左右滑动查看,移动适配报告里的溢出提示消失。
这里还有个坑。小屏适配不是简单缩放,凡是固定宽度的表格和图组都要给滚动容器,断点至少要覆盖 320px。报错文案容易误导,真正的原因往往在相邻那一层的日志里。
