Html 网站正文背景在 iPhone Safari 中呈现右白边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5804441/
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 body background rendering a right white margin in iPhone Safari
提问by Xavi Esteve
I have a rendering error in this website which I haven't seen anywhere else. The website renders in all modern browsers and validates fine although I can't figure out why is it not displaying the full background image (see screenshots below). I am using Yahoo CSS Reset and the background image is declared in the body like this:
我在这个网站上有一个渲染错误，我在其他任何地方都没有看到过。该网站在所有现代浏览器中呈现并验证良好，尽管我无法弄清楚为什么它不显示完整的背景图像（请参见下面的屏幕截图）。我正在使用 Yahoo CSS Reset 并且背景图像在正文中声明如下：
background: url("back.jpg") #033049;
You can also visit the website: http://xaviesteve.com/
您也可以访问网站：http: //xaviesteve.com/
Let me know if I should provide any more details. Any help/hint is appreciated, thank you.
如果我应该提供更多详细信息，请告诉我。任何帮助/提示表示赞赏，谢谢。
EDIT
编辑
I have found very few people reporting this issue around the Internet:
我发现网上很少有人报告这个问题：
Another SO question: White space showing up on right side of page when background image should extend full length of pageSuggested applying
overflow-x:hiddenbut it crops the website.In an iPad forum: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.htmlNo replies
另一个 SO 问题：当背景图像应扩展页面的全长时，页面右侧显示空白建议应用
overflow-x:hidden但它会裁剪网站。在 iPad 论坛中：http: //www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html没有回复
SOLUTION
解决方案
I've been investigating and trying different ways to solve this and found that adding the background image to the <html>tag fixed the problem. Hope this saves some time to other devs.
我一直在调查并尝试不同的方法来解决这个问题，发现将背景图像添加到<html>标签解决了这个问题。希望这可以为其他开发人员节省一些时间。
Before
前
body {background:url('images/back.jpg');}
After
后
html, body {background:url('images/back.jpg');}
回答by Walter Cameron
Moving the styling to the html element works fine, but there are other ways of fixing this.
将样式移动到 html 元素可以正常工作，但还有其他方法可以解决此问题。
What's going on here is initially the body element is sized according to the viewport. If the viewport is only Xpixels wide, your body will only be Xpixels wide, even if the contained content is wider. To fix this, give your body(or whatever you're attaching the background stylings to) a non-percentage based widthor a min-widthto fit your content.
这里发生的事情最初是根据视口调整 body 元素的大小。如果视口只有X像素宽，则X即使包含的内容更宽，您的正文也只有像素宽。要解决此问题，请为您的body（或您将背景样式附加到的任何内容）提供一个非百分比width或 amin-width以适合您的内容。
You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.
通过缩小浏览器窗口并向右滚动，您实际上会在桌面浏览器上遇到相同的问题。这个问题在 iPhone/iPad 上更明显，因为默认情况下，Mobile Safari 会将视口设置为 980px，然后缩小直到所有内容都适合屏幕。
An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:
另一个我不推荐的替代解决方案，因为它只适用于 Mobile Safari 是自己使用以下方法设置视口宽度：
<meta name = "viewport" content = "width = 1080">
More info at Apple's Developer Docs.
Apple 的开发人员文档中的更多信息。
回答by Cassie
Just ran into this problem and fixed it by setting all content that uses width:100%; to also have min-width set larger than the width of your content divs. FOr example:
刚遇到这个问题并通过设置所有使用 width:100% 的内容来修复它；还要将 min-width 设置为大于内容 div 的宽度。例如：
.content_bg{width:100%; min-width:1080px;}
I also fixed it on mobile devices using media queries: for iPhone and iPad:
我还使用媒体查询在移动设备上修复了它：对于 iPhone 和 iPad：
/*ipad portrait*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
body{width:1080px;}
}
/*ipad landscape*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
body{width:1080px;}
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
body{width:1080px;}
}
回答by Ahmed Fahmy
Set background-size to 100% and background-position to top-left. It will works fine as follows:
将 background-size 设置为 100%，将 background-position 设置为左上角。它将按如下方式正常工作：
background-color: #336699;
background-image: url('whatever.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;`enter code here`
回答by Julian Andrés
None of those solutions solved my problem, but I found out a rather simple one.
Just set the background-sizeof your bg container equivalent to the image dimensions, like this:
这些解决方案都没有解决我的问题，但我发现了一个相当简单的解决方案。只需将background-sizebg 容器的设置为与图像尺寸相等，如下所示：
body {
background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
background-size: 1920px 3840px;
}
Although it may seem a bit redundant and not nearly as good as making your site responsive, it works fine.
尽管它可能看起来有点多余，而且不如使您的网站具有响应性好，但它运行良好。
回答by Michael
I know this is already answered some time ago, but none of the fixes I could find worked for me, but I managed my own solution which should work for most people I imagine.
我知道这已经在一段时间前得到了回答，但是我能找到的修复方法都没有对我有用，但是我管理了自己的解决方案，它应该适用于我想象的大多数人。
Here's my code:
这是我的代码：
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
Hopefully it helps someone!
希望它可以帮助某人！
