移动设备网站右侧的空白区域

Question

http://cardiffhosp.rapdevs.co.uk/是围绕WooTheme Canvas构建的，这是一种响应式设计。

我必须禁用视口元标记，因为我不希望布局响应。

现在在移动设备上看起来要好得多，但右侧出现白色区域。在iPhone / iPad上最常见，但在其他设备上缩小显示空白区域。

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

html, body {
   overflow-x:hidden;
}

有没有人有更好的解决方案来移除空白区域？

Answer 1

您可以尝试添加width:100%并查看是否解决了溢出导致的问题，IE：

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

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

有几种方法可以做到这一点。 （请务必在开始前删除overflow-x:hidden;。）

1）打开检查器，从包含其他元素的div或元素开始。将这些div设置为display:none。如果多余的空白区域消失，那么您可以找到有问题的元素并修复其CSS。

如果该选项太耗时或您无法执行此操作，则可以尝试其他选项：

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

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

他们还提供了一个javascript bookmark来帮助解决这个问题。