移動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白色填充/右邊空白

回答

相關問題