网站正文背景在 iPhone Safari 中呈现右白边距

Question

我在这个网站上遇到了我在其他地方没有见过的渲染错误。该网站在所有现代浏览器中呈现并验证良好，尽管我无法弄清楚为什么它不显示完整的背景图像（请参见下面的屏幕截图）。我正在使用 Yahoo CSS Reset，背景图像在正文中声明如下：

background: url("back.jpg") #033049;

您还可以访问该网站： http:// xaviesteve.com/

如果我需要提供更多详细信息，请告诉我。 任何帮助/提示表示赞赏，谢谢。

编辑

我发现互联网上很少有人报告此问题：

1. 另一个SO问题：当背景图像应延伸到页面的整个长度时，页面右侧会显示空白 建议应用overflow-x:hidden 但它会裁剪网站。

2. 在 iPad 论坛中：http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html 无回复

解决方案

我一直在调查并尝试不同的方法来解决此问题，发现将背景图像添加到 标记可以解决该问题。希望这能为其他开发人员节省一些时间。

之前

body {background:url('images/back.jpg');}

之后

html, body {background:url('images/back.jpg');}

Answer 1

将样式移至 html 元素效果很好，但还有其他方法可以解决此问题。

这里发生的事情最初是根据视口调整 body 元素的大小。如果视口只有 X 像素宽，则您的正文也只有 X 像素宽，即使包含的内容更宽。要解决此问题，请为您的 body（或您要附加背景样式的任何内容）指定一个非基于百分比的 width 或 min-width > 适合您的内容。

实际上，通过缩小浏览器窗口并向右滚动，您在桌面浏览器上也会遇到同样的问题。这个问题在 iPhone/iPad 上更为明显，因为默认情况下，Mobile Safari 会将视口设置为 980 像素，然后缩小，直到所有内容适合屏幕。

另一种解决方案（我不建议这样做，因为它仅适用于 Mobile Safari）是您自己设置视口宽度：

<meta name = "viewport" content = "width = 1080">

更多信息位于 Apple 开发人员文档。

Answer 2

刚刚遇到这个问题，并通过设置所有使用 width:100% 的内容来修复它；还可以将 min-width 设置为大于内容 div 的宽度。
例如：

.content_bg{width:100%; min-width:1080px;}

我还使用媒体查询在移动设备上修复了它：
对于 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;}
    }

Answer 3

这些解决方案都没有解决我的问题，但我发现了一个相当简单的解决方案。
只需将 bg 容器的 background-size 设置为与图像尺寸相同，如下所示：

body {
    background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
    background-size: 1920px 3840px;
}

虽然它可能看起来有点多余，而且不如让您的网站响应良好，但它工作得很好。

Answer 4

将背景大小设置为 100%，将背景位置设置为左上角。它将正常工作，如下所示：

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`

Answer 5

我知道这个问题已经在前一段时间得到了解答，但是我找到的所有修复程序都不适合我，但我管理了自己的解决方案，该解决方案应该适用于我想象的大多数人。

这是我的代码：

<代码>
html{
背景： url("../images/blahblah.jpg") 重复-y;
最小宽度：100%；
背景大小：包含；
}

希望它对某人有帮助！