Mobile 移动设备上网站右侧的空白

围绕WooTheme画布构建，这是一种响应性设计

我不得不禁用viewport meta标记，因为我不希望布局有响应性

它现在在移动设备上看起来好多了，但右边出现了一个白色区域。大部分在iPhone/iPad上可见，但在其他设备上缩小显示空白

添加以下代码，解决了我的问题，但导致导航在iPhone上停止工作，并导致Windows 7手机出现显示问题

html, body {
   overflow-x:hidden;
}

---

是否有人有更好的解决方案来删除空白？

您可以尝试添加

宽度：100%

，看看这是否解决了溢出造成的问题，即：

html, body {
    overflow-x:hidden;
    width:100%;
   /* You may also want to try adding:*/
    margin: 0;
    padding: 0;
}

如果这仍然会导致问题，那么您需要找到导致问题的元素

有几种方法可以做到这一点。（在启动之前，请确保删除

溢出-x:hidden；

。）

1） 打开inspector，从包含其他元素的div或元素开始。将这些div设置为

display:none

。如果多余的空白消失了，那么您可以找到有问题的元素并修复其CSS

如果该选项太耗时或您在执行时遇到困难，您可以尝试其他选项：

2） 有一些CSS概述了你网站上的所有元素。这可以帮助您找到导致溢出的原因。本网站使用的CSS为：

* {
   background: #000 !important;
   color: #0f0 !important;
   outline: solid #f00 1px !important;
}

它们也提供了一个帮助解决这一问题的方法