网站在 iPhone 屏幕右侧显示空白答案

【问题标题】：Website is displaying a white space on right side of screen in iPhone网站在 iPhone 屏幕右侧显示空白
【发布时间】：2013-09-27 16:09:12
【问题描述】：

我在http://eiglaw.com 上遇到了问题——iPhone 屏幕右侧显示了大约 25 像素宽的空白/边框。我在 stackoverflow 上研究了这个问题，这些帖子是相关的，但是当我尝试提供的各种解决方案时，我无法解决这个问题：

Responsive website on iPhone - unwanted white space on rotate from landscape to portrait

Website body background rendering a right white margin in iPhone Safari

White space on right side of header on zoom

我在 iPad 上遇到了类似的问题，但能够通过这个媒体查询解决它：

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

我尝试了各种针对 html 和 body 元素的媒体查询，但都没有成功。我查看了整个 CSS 文件中的背景图像、边距、填充、溢出等问题，但我真的很难过。有没有人有什么建议？

非常感谢！

【问题讨论】：

标签： html iphone ios css removing-whitespace

【解决方案1】：

问题在于您的<h3 class="menu-toggle">Menu</h3>（为什么是h3，顺便说一句？），因为有width: 100% + 一些填充，它似乎比视口更宽。

尝试为该元素设置box-sizing: border-box;。

【讨论】：

这完全有效！所以从中吸取的教训是任何宽度为 100% 的元素都不应该有任何左或右填充。如果是这样，iOS 将添加它并在右侧显示一个空白区域，等于该额外填充。
这与 iOS 无关，问题在其他浏览器上也可以重现。每当您使用带有填充的width: 100% 时，您必须设置box-sizing: border-box; 以避免重叠。
我刚刚在这里解决了同样的问题...问题是我的一个标题大于 100%...谢谢 :)

【解决方案2】：

这对 Tigra 很有帮助。

我刚刚在样式表的顶部添加了一个全局类：

div {
  box-sizing: border-box;
  }

干杯！

【讨论】：

【解决方案3】：

使用以下样式：

body{
  overflow-x: hidden !important;
}

这将消除屏幕两侧的溢出，即屏幕上的额外空白

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案4】：

试试这个

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

【讨论】：

不知道，因为我说“试试这个”。