网站身体背景在iPhone Safari中呈现正确的白色边缘
Xav*_*eve 15 html css iphone mobile-safari
我在这个网站上有一个渲染错误,我在其他任何地方都没见过.该网站在所有现代浏览器中呈现并验证正常,但我无法弄清楚为什么它不显示完整的背景图像(见下面的截图).我正在使用Yahoo CSS重置,并在身体中声明背景图像,如下所示:
background: url("back.jpg") #033049;
您也可以访问网站:http://xaviesteve.com/
如果我应该提供更多细节,请告诉我.任何帮助/提示表示赞赏,谢谢.
编辑
我发现很少有人在互联网上报告这个问题:
另一个问题:当背景图像应该延伸到页面的整个长度时,页面右侧会显示空白区域建议应用
overflow-x:hidden但它会裁剪网站.在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');}
Wal*_*ron 22
将样式移动到html元素工作正常,但还有其他方法可以解决这个问题.
这里发生的事情最初是根据视口调整body元素的大小.如果视口仅为X像素宽,则X即使包含的内容较宽,您的正文也只会是像素宽.要解决此问题,请将您body(或任何附加背景样式的内容)给予非百分比width或min-width适合您的内容.
通过缩小浏览器窗口并向右滚动,您实际上在桌面浏览器上遇到了同样的问题.iPhone/iPad上的问题更加明显,因为默认情况下,Mobile Safari会将视口设置为980px,然后缩小,直到所有内容都适合屏幕.
另一种解决方案,我不推荐,因为它仅适用于Mobile Safari,您可以使用以下方法自行设置视口宽度:
<meta name = "viewport" content = "width = 1080">
有关Apple开发人员文档的更多信息.
| 归档时间： |
|
| 查看次数： |
25631 次 |
| 最近记录： |