移动端页面出现右侧未知边距问题求助

我最近碰到个烦人的问题：电脑端访问网站完全正常，但在手机端测试时，页面右侧多出一块奇怪的边距。我把body背景改成黑色后，这块边距也跟着变黑了，所以推测问题根源在body标签上。

由于CSS代码太长没法全部贴出来，下面是和边距、body相关的核心代码：

相关CSS代码 #

* { margin: 0; padding: 0; }
body { 
    background-color: #000; 
    margin: 0; 
    padding: 0; 
    min-height: 100vh; 
    width: 100%; 
    overflow-x: hidden; 
    font-family: 'PT Sans Narrow', sans-serif; 
    text-rendering: optimizeLegibility; 
    height: 100%; 
}
@media (max-height: 400px) { 
    body { height: 100vh; } 
}

相关HTML结构 #

<div class="open"> 
    <div class="layer"></div> 
    <div class="layer"></div> 
</div> 
<div class="wrapper"> 
    <div class="wrap"> 
        <section> 
            <div class="header"> 
                <h2 class="logo">Fallen Angels</h2> 
                <i class="fa fa-bars x2" onclick="menuToggle()" /> 
                <ul id="navbar"> 
                    <li><a href="#" class="active">Home</a></li> 
                    <li><a href="#">Accounts</a></li> 
                    <li><a href="#">Boosting</a></li> 
                    <li><a href="#">Contact</a></li> 
                    <li><a href="#">Login</a></li> 
                    <li><a href="#">Sign Up</a></li> 
                    <i class="fa fa-times x2" onclick="menuToggle()"></i> 
                </ul> 
            </div> 
            <div class="bannerText"> ... </div> 
        </section> 
    </div> 
</div>

我试过调整body的width属性，但这只是把整个页面（包括那块边距）一起缩小了，根本没解决问题。

针对这个问题的排查建议和解决方案： #

• 先检查viewport元标签：这是移动端适配的基础，如果没加或者配置不对，很容易出现奇怪的布局问题。建议在HTML头部加上：

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

• 排查溢出的子元素：虽然body设置了overflow-x: hidden，但如果某个子元素的宽度超过了视口，还是会撑开body导致出现横向滚动或边距。你可以用浏览器的开发者工具（切换到移动端模式），逐个检查元素，或者给可疑元素临时加outline: 1px solid red来快速定位哪个元素超出了范围。

• 给容器层也加上溢出控制：给.wrapper和.wrap这两个容器也添加上overflow-x: hidden，防止内部元素溢出影响body：

  .wrapper, .wrap {
      width: 100%;
      overflow-x: hidden;
  }
  

• 检查固定宽度的元素：看看页面里有没有用固定px宽度的元素，在移动端屏幕较小时，这些元素很容易超出视口。把它们改成max-width: 100%或者用百分比、rem等相对单位。

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