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

【问题标题】：White Space to the Right of Website on Mobile Devices移动设备上网站右侧的空白
【发布时间】：2012-09-28 11:37:10
【问题描述】：

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

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

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

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

html, body {
   overflow-x:hidden;
}

有没有人有更好的解决方案来去除空白？

【问题讨论】：

【解决方案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 来帮助解决这个问题。

【讨论】：