这类问题我又碰上了一次。参数对比页的表格宽 900px,375px 视口下整页可以左右拖动,百度移动适配检测提示内容超出屏幕,缩字体、改字号都没解决。

第一反应是「viewport 没写 width=device-width」,验证下来不成立。

原因不止一个,得分开看。表格固定宽度,没有做容器级滚动;表格里的长英文型号不换行;外层容器的 overflow 被设成了 visible。

先确认页面有没有横向溢出

curl -s https://www.example.com/compare/ | Select-String viewport

给表格包一层横向滚动容器

echo '<div style="overflow-x:auto"><table>...</table></div>';

再往下让长词强制换行

echo 'td{word-break:break-all}';

剩下的就是用移动 UA 复核页面宽度

curl -s -A "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)" https://www.example.com/compare/ | Select-String viewport

隔了一天再看,现象没变,说明不是偶发。

那几天正好在做别的变更,先把时间线对齐才敢动手。

改完先别撤,确认这几项。375px 下页面不再整体横向滚动,表格可以局部左右滑动,移动适配检测通过。

这里还有个坑。表格溢出靠缩小字体解决不了,正确做法是让表格自己在容器里滚动。改动前把原配置备份一份,出问题能马上回滚,这比任何技巧都实用。

作者 9823189