瀏覽器渲染右邊距iPhone/iPad/webkit

我有一個html代碼片段，它在所有瀏覽器中完美渲染。然而，在iphone和ipad上的webkit中，當我捏住頁面（使其更小）時，我看到一個黑色邊框，它是僅在右側邊緣閃爍的背景色。這隻發生在我指定.headerpic div的寬度時。由於這是文檔中唯一指定寬度的地方，我想知道爲什麼它不能完全呈現到右邊緣（因爲這在理論上是文檔中最廣泛的部分？）。瀏覽器渲染右邊距iPhone/iPad/webkit

我附上了一張從我的ipad看起來像的照片。

<!doctype html> 
<html> 

    <head> 

    <style> 
     body {background-color:#000;color:#231f20;margin:0;} 
     #wrapper {background-color:#fff;min-height:1000px;} 
     #header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;} 
     #footer {color:#fff;} 
    </style> 
    </head> 

    <body> 

    <div id="wrapper"> 
     <div id="header"> 
     <div class="headerpic"> 
     </div> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 

    </body> 
</html>

Photo Of problem

來源

2011-03-01 robzolkos

這將說明你的問題有點清晰：http://jsbin.com/ilenu5/5

我所做的：

我增加了 #headerpic的寬度1286px
我加的#headerpic一個背景顏色，這是紅色的

所以你的實際問題是：溢出發生

爲什麼？因爲你沒有設置你的viewport（width=device-width）和最小物理寬度（以像素或釐米或EM）的body，所以你body寬度默認爲980px，並通過#wrapper繼承 - 讓你的986px #headerpic溢出#wrapper ，並顯示黑色背景。由於溢出的區域寬度很小（986-980 = 6px），您會看到一條黑線。

來源

2011-03-01 18:32:10 vincicat

謝謝！我將body的最小寬度設置爲986px，問題在iphone/ipad中修復，並且不會影響正常的瀏覽器。謝謝你的幫助。 – robzolkos 2011-03-01 20:40:52

不客氣:) – vincicat 2011-03-02 03:32:41

我想這是一個很好的解釋爲什麼這個問題正在發生，但對我來說，它似乎並沒有轉化爲解決方案。 [這個其他答案]（http://stackoverflow.com/a/15029243/199712）是什麼修復它對我來說。 – 2015-11-30 13:57:31

製作#wrapperposition:absolute解決了這個問題。

來源

2011-03-01 15:03:30 Alex

確實，這可以修復iphone/ipad上的問題，但會破壞正常瀏覽器中的設計。 – robzolkos 2011-03-01 20:40:01

在我的情況下使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

相反的：

<meta name="viewport" content="width=device-width">

的伎倆！

來源

2013-02-22 16:53:51

這對我有用。似乎這應該是被接受的答案。 – 2015-11-30 13:58:01

在我的情況是：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

和：

html, body {min-width:980px; overflow-x: hidden;}

解決了這個問題。

來源

2014-09-29 15:12:57 Starkadh

應用

overflow-x:hidden;

我的div一個做了

給予信貸@starkadh爲靈感。

來源

2016-03-12 18:00:32

瀏覽器渲染右邊距iPhone/iPad/webkit

回答

相關問題