html – 网站身体背景在iPhone Safari中渲染一个正确的白边

概述我在这个网站有一个渲染错误,我没有看到其他地方.该网站呈现在所有现代浏览器中,并且验证正常,但我无法弄清楚为什么它不显示完整的背景图像(见下面的屏幕截图).我正在使用雅虎CSS重置,背景图像在身体中声明如下： background: url("back.jpg") #033049; 您也可以访问网站：http://xaviesteve.com/ 让我知道如果我应该提供更多的细节. 任何帮助/提示不 我在这个网站有一个渲染错误,我没有看到其他地方.该网站呈现在所有现代浏览器中,并且验证正常,但我无法弄清楚为什么它不显示完整的背景图像(见下面的屏幕截图).我正在使用雅虎CSS重置,背景图像在身体中声明如下：

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

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

让我知道如果我应该提供更多的细节.
任何帮助/提示不胜感激,谢谢.

编辑

我发现很少有人在互联网上报道这个问题：

>另一个SO问题：White space showing up on right side of page when background image should extend full length of page建议应用overflow-x：隐藏,但是它会影响网站.
>在iPad论坛：http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html没有回复

解

我一直在调查和尝试不同的方法来解决这个问题,发现将背景图像添加到< HTML>标签固定问题.希望这可以节省一些时间到其他开发者.

之前

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

后

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

解决方法 将样式移动到HTML元素可以正常工作,但还有其他修复方法.

这里发生的是最初的body元素根据视口大小而定.如果视口只有X像素宽,您的身体将只有X像素宽,即使包含的内容更宽.要解决这个问题,请给您的身体(或任何您附加的背景样式)以非百分比为基础的宽度或最小宽度适合您的内容.

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

一个替代解决方案,我不推荐,因为它只适用于Mobile Safari,您可以使用以下方式设置视口宽度：

<Meta name = "vIEwport" content = "wIDth = 1080">

Apple’s Developer Docs的更多信息.

总结

以上是内存溢出为你收集整理的html – 网站身体背景在iPhone Safari中渲染一个正确的白边全部内容，希望文章能够帮你解决html – 网站身体背景在iPhone Safari中渲染一个正确的白边所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。