Html 网站在 iPhone 屏幕右侧显示空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18947793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Website is displaying a white space on right side of screen in iPhone
提问by Greg
I am having a problem on http://eiglaw.com-- an approximately 25px wide white space/border is showing on the right side of the screen on iPhone. I researched the problem on stackoverflow and these posts are relevant but when I tried the various solutions offered I have not been able to fix the problem:
我在http://eiglaw.com上遇到了一个问题——大约 25 像素宽的空白/边框显示在 iPhone 屏幕的右侧。我在 stackoverflow 上研究了这个问题，这些帖子是相关的，但是当我尝试提供的各种解决方案时，我无法解决问题：
Responsive website on iPhone - unwanted white space on rotate from landscape to portrait
iPhone 上的响应式网站 - 从横向旋转到纵向时不需要的空白
Website body background rendering a right white margin in iPhone Safari
White space on right side of header on zoom
I had a similar problem on iPad but was able to fix it with this media query:
我在 iPad 上遇到了类似的问题，但能够通过以下媒体查询解决它：
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/*and (orientation : landscape)*/ {
html,
body {
width:1000px;
}
}
I have tried various media queries targeting the html and body elements with no luck. I have looked through the entire CSS file for problems with background images, margins, padding, overflows, etc., but am really stumped. Does anyone out there have any suggestions?
我尝试了各种针对 html 和 body 元素的媒体查询，但都没有成功。我已经查看了整个 CSS 文件以查找背景图像、边距、填充、溢出等问题，但我真的很难过。有没有人有任何建议？
Many thanks!
非常感谢！
回答by Tigran Petrossian
The trouble is in your <h3 class="menu-toggle">Menu</h3>(why h3, btw?), which appears to be wider than a viewport because of having width: 100%+ some padding.
问题出在你的<h3 class="menu-toggle">Menu</h3>（为什么是 h3，顺便说一句？），由于有width: 100%+ 一些填充，它似乎比视口更宽。
Try setting a box-sizing: border-box;to that element.
尝试将 a 设置box-sizing: border-box;为该元素。
回答by Joff
This worked a treat Tigran.
这对 Tigran 很有用。
I just added a global class at the top of my stylesheet:
我刚刚在样式表的顶部添加了一个全局类：
div {
box-sizing: border-box;
}Cheers!
干杯!
回答by mdesdev
Try this
尝试这个
iPhone 5 - Landscape
iPhone 5 - 横向
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }
iPhone 5 - Portrait
iPhone 5 - 人像
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }
iPhone 4
iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
