为何浏览器inspector初始状态不同页面会出现横向溢出滚动？

根因排查及解决方案 #

• 首先检查视口meta标签配置
  确认你的HTML头部存在正确的视口声明：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  缺少该标签时，浏览器会默认按桌面端宽度渲染移动端页面，直接打开小屏视图时就会出现横向溢出。
• 检查固定宽度属性设置
  1. 确认全局开启了盒模型规则，避免padding、border撑宽容器：

  * {
    box-sizing: border-box;
  }
  

  2. 排查所有元素是否存在写死的固定宽度（比如500px以上的width、min-width属性），小屏场景下未通过媒体查询适配为100%/auto。
• 检查JS动态宽度逻辑
  这个是最匹配你描述场景的高频原因：如果你写了JS逻辑绑定resize事件来动态计算元素宽度，但是没有在页面初始化（DOM加载完成）时主动执行一次该计算逻辑，就会出现：手动缩放页面触发resize后样式正常，直接小屏刷新时resize未触发、元素宽度还是按大屏默认值计算，最终出现溢出。
  修复方法：把动态计算宽度的逻辑封装成独立函数，同时绑定到resize事件和DOMContentLoaded/load事件。
• 临时应急方案
  如果需要先屏蔽横向滚动问题，可以给body添加样式：

  body {
    overflow-x: hidden;
  }
  

  该方案只是掩盖问题，建议优先排查前面的根因彻底修复。

内容的提问来源于stack exchange，提问作者Wilson