移动Safari白色填充/右边空白

我已查看其他主题，但似乎无法弄清楚这一点。在此处测试此网站：http://www.mf.jlscs.com/移动Safari白色填充/右边空白

在移动Safari中的纵向视图中，我可以滚动到右侧以空白，白色填充。我不想要这个。

在横向视图中，这个滚动不在那里，它呈现为我想要的。

我不知道什么是造成这种神秘的推动。我试图消除溢出x，但这并没有办法。如果我消除每个容器上的overflow-x，那么对于页面中的每个容器都会发生相同的效果。有任何想法吗？

来源

2011-12-21 ShawnB

我试着在我的iphone上的网站，我无法滚动到正确的......它似乎按预期工作。 – Fred 2011-12-21 16:46:46

这很可能是由您的某个结构元素超出您的身体宽度引起的。寻找类似width: 100%; padding 20px;的东西，或者让它射出来的东西。

我建议把红色的边框放在所有主要的div上，看看哪个是罪魁祸首，并延伸到边缘。

来源

2011-12-21 14:34:50 Indranil

-3

我建议下载Web Developer for Firefox，只需打开Outline> Outline Block Level Elements。

来源

2012-02-03 20:32:13

只需向某些div添加边框就可以导致布局更改。添加到您的CSS的底部找到流氓元素：

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

我也做了一个书签，这是否通过JavaScript，因此它可以很容易地在任何网站上使用。 http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

来源

2013-08-09 19:29:01

正是我在找什么。试图将这些代码作为规则添加到Safari的网络检查员中，这被证明是一种痛苦。谢谢！ – mhulse 2013-11-14 17:45:50

这是一段奇妙的代码！谢谢！ – Raccoon 2016-07-20 17:31:16

事实上，这个问题是由于出于某种原因延伸到文档宽度之外的“流氓”元素造成的。

一种方法是使用上面的CSS，还没有尝试过，但我不确定使用边框来识别元素是多么容易。

一种不同的方法，可运行此JS代码在控制台找到它们：

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

这将返回卫生组织宽度+所有元素偏移的阵列（从左边的距离）是大比clientWidth。

然后，您需要检查元素并找出它们为什么表现如此 - 在我的情况下，页脚有width:100%和，这导致其宽度比文档宽度大20px。

有趣的是，这仅仅出现在iPhone上，而不是Android上。

来源

2016-07-21 08:43:45

移动Safari白色填充/右边空白

回答

相关问题