網站在 iPhone 屏幕右側顯示空白

Question

我在http://eiglaw.com上遇到問題 - iPhone 屏幕右側顯示大約 25 像素寬的空白/邊框。 我在stackoverflow上研究了這個問題，這些帖子是相關的，但是當我嘗試提供的各種解決方案時，我無法解決這個問題：

iPhone上的響應式網站-從橫向旋轉到縱向時不需要的空白

在 iPhone Safari 中呈現右白邊的網站正文背景

縮放時標題右側的空白

我在 iPad 上遇到了類似的問題，但能夠通過以下媒體查詢解決它：

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

我嘗試了各種針對 html 和 body 元素的媒體查詢，但沒有成功。 我查看了整個 CSS 文件中的背景圖像、邊距、填充、溢出等問題，但我真的很難過。 有沒有人有任何建議？

非常感謝！

Answer 1

問題出在你的<h3 class="menu-toggle">Menu</h3> （為什么是 h3，順便說一句？），它似乎比視口更寬，因為width: 100% + 一些填充。

嘗試設置box-sizing: border-box; 到那個元素。

Answer 2

這對 Tigran 很有用。

我剛剛在樣式表的頂部添加了一個全局類：

 div { box-sizing: border-box; }

干杯!

Answer 3

使用以下樣式：

body{
  overflow-x: hidden !important;
}

這將消除屏幕兩側的溢出，即屏幕上的額外空白

Answer 4

iOS是垃圾，找到解決為什么一半屏幕變白並且您不斷滾動進入它的唯一方法顯然是成為一個該死的程序員。

Answer 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) { }