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

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)该网站有一些 CSS 概述了您网站上的所有元素。这可以帮助您找到导致溢出的原因。本网站使用的 CSS 是：

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

他们还提供了一个javascript 书签，对此也有帮助。