網站在iPhone屏幕右側顯示一個空白區域

我在http://eiglaw.com上遇到問題 - iPhone屏幕右側顯示約25px寬的空白/邊框。我研究了計算器的問題，而這些職位相關，但是當我嘗試了各種解決方案提供我一直沒能解決這個問題：網站在iPhone屏幕右側顯示一個空白區域

我在iPad上的類似問題，但能夠解決它與此媒體查詢：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
/*and (orientation : landscape)*/ { 
html, 
body { 
width:1000px; 
} 
}

我已經嘗試過針對html和body元素的各種媒體查詢，但沒有運氣。我已經瀏覽了整個CSS文件，以瞭解背景圖像，邊距，填充，溢出等問題，但真的很難。有沒有人有任何建議？

非常感謝！

來源

2013-09-22 Greg

麻煩的是在你的<h3 class="menu-toggle">Menu</h3>（W hy h3，btw？），由於有width: 100% +一些填充，它看起來比視口更寬。

嘗試將box-sizing: border-box;設置爲該元素。

來源

2013-09-22 19:44:49

這完全奏效！因此，從中得出的教訓是任何寬度爲100％的元素都不應該有任何左側或右側填充。如果確實如此，iOS會添加它並在右側顯示一個等於該額外填充的空白區域。 – Greg

這不是關於iOS，問題也可以在其他瀏覽器上重現。每當您使用'width：100％'填充時，您必須設置'box-sizing：border-box;'以避免重疊。 –

我剛剛在這裏解決了同樣的問題...問題是我的一個標題大於100％...謝謝:) – user754730

-5

試試這個

iPhone 5 - 景觀

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }

iPhone 5 - 肖像

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }

來源

2013-09-22 19:39:06 mdesdev

這是否工作？ –

不知道，因爲我說「試試這個」。 – mdesdev

刪除 :) – mdesdev

這工作對待提格蘭。

我只是在我的樣式表的頂部增加一個全局類：

div { 
 
    box-sizing: border-box; 
 
    }

乾杯！

來源

2015-08-28 03:57:01 Joff

網站在iPhone屏幕右側顯示一個空白區域

回答

相關問題