手机端莫名出现横向滚动条，怎么快速找出超宽元素

页面在手机上能左右拖动，底部出现横向滚动条，桌面浏览器缩窄也能复现。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

document.querySelectorAll('*').forEach(el => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1)
    console.log(el.tagName, el.className, el.getBoundingClientRect().width);
});

某个元素宽度超过视口，常见于固定宽度、负边距或绝对定位超出边界。这一点先确认清楚，后面就不用反复试。

「移动端横向滚动」这个问题文档写得含糊，实际行为以当前版本为准，别照旧版本的结论套。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

改完隔一天再看一次，当场正常不代表能稳住。测试环境和线上的差别，往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点，跟发布、备份、任务执行的时刻排一排，能省掉一半功夫。日志级别临时调高可以，记得改回去，长期开着既占磁盘又掩盖真问题。

具体做法是，先给可疑容器加描边定位；用脚本列出超出视口宽度的节点；再针对该元素改宽度策略。

改完照着核一遍，横向滚动条消失，页面宽度与视口一致。