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

发布时间:2020-01-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 网站身体背景在iPhone Safari中渲染一个正确的白边脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这个网站有一个渲染错误,我没有看到其他地方.该网站呈现在所有现代浏览器中,并且验证正常,但我无法弄清楚为什么它不显示完整的背景图像(见下面的屏幕截图).我正在使用雅虎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中渲染一个正确的白边所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: