网页出现向左偏移问题，PC端与移动端显示异常如何排查修复

排查步骤 #

• 检查视口配置：查看head标签内是否有正确的viewport配置，错误的viewport会导致移动端视口宽度计算异常，出现偏移。正确配置如下：
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• 检查盒模型设置：排查是否有元素设置100vw宽度的同时添加了padding、border、margin属性，100vw默认包含滚动条宽度，额外添加边距会导致元素总宽度超出视口，撑出横向滚动条引发偏移。
• 排查溢出元素：打开浏览器开发者工具的控制台，执行以下代码定位超出视口宽度的元素：

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
    console.log('溢出元素：', el);
  }
})

找到对应元素后检查其CSS属性，确认是否存在负margin-left、固定宽度大于当前视口宽度、子元素撑宽父容器等问题。

• 检查默认样式重置：确认是否重置了body等标签的浏览器默认margin，部分浏览器默认给body添加8px的外边距，未重置的情况下设置100%宽度会引发溢出偏移。

解决方案 #

• 全局样式重置：在CSS文件开头添加全局重置规则，消除默认样式影响：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 临时隐藏横向溢出，建议定位到溢出根源后删除该属性 */
body {
  overflow-x: hidden;
}

• 修正viewport配置：如果缺少viewport配置或者配置错误，将正确的viewport标签添加到head标签的最顶部。
• 替换100vw设置：将所有元素的width: 100vw属性替换为width: 100%，100%宽度基于父元素的可用宽度计算，不会包含滚动条宽度，可避免溢出。
• 适配固定宽度容器：将固定宽度的容器修改为响应式设置，例如原宽度为1200px的容器修改为：

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

• 修正异常边距：删除元素不合理的负margin-left设置，调整边距取值避免超出视口。

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