手机端页面右侧溢出出现空白，设置overflow-x:hidden仍无效

以下是可直接落地的排查和修复步骤：

1. 确认viewport元标签配置正确 #

绝大多数移动端横向空白问题都是缺少正确的viewport配置导致的，请在页面head标签内加入如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 排查子元素溢出问题 #

就算给html、body设置了overflow-x: hidden，子元素溢出视口仍可能触发空白，按以下优先级排查：

• 检查是否有元素设置了width: 100vw，移动端vw计算包含滚动条宽度，会实际超出视口宽度，替换为width: 100%即可
• 检查是否有元素设置100%宽度的同时附加了左右margin、padding，且未开启box-sizing: border-box，导致总宽度超出容器
• 检查absolute/fixed定位的元素，是否存在left/right属性设置不当，导致元素主体偏移出可视区域

3. 添加全局样式兜底 #

可以加入以下全局样式避免盒模型问题导致的溢出：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  overflow-x: hidden;
  position: relative;
}

给html、body添加position: relative可以保证子元素的溢出隐藏规则能正常生效。

4. 快速定位溢出元素 #

如果仍未找到问题，可以在浏览器控制台执行以下代码，直接打印出所有宽度超出视口的元素，针对性修改即可：

[].forEach.call(document.querySelectorAll('*'), function(el){
  if(el.offsetWidth > document.documentElement.offsetWidth) {
    console.log('溢出元素：', el)
  }
})

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