即使在移动浏览器上,后台总是填充浏览器窗口?

时间:2011-10-18 04:04:00

标签: css css3 cross-browser mobile-webkit opera-mobile

我已经尝试了Stretch and scale CSS background(以及http://css-tricks.com/3458-perfect-full-page-background-image/)的答案,并且它在Firefox和Chrome中运行得很漂亮,但这两种方法都在Android浏览器中失败了。这两种技术都以同样的方式失败:当我向下滚动时,背景会留在后面,所以我最终得到一个白色背景。 (您可以通过在Android浏览器中查看此页面来查看问题:http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

当我开始滚动时,背景会有一个初始跳跃;我认为这与位置框不再可见(即浏览器窗口大小增加)有关。

将手机从横向转为肖像时,行为基本相同;在上面的示例网址上很难看到,因为背景将在该示例中填充高度。当文本较长时,它会以相同的方式中断。

Android 2.2.1版,内置webkit浏览器。

行为是不同的,但同样错误,使用opera mobile:当我滚动时有半秒延迟然后背景跳跃。但是背景仅填充了大约80%的高度,因此屏幕顶部或底部有一个白色块。 (这是“在较低的z-index上的img”解决方案; css3后台大小的解决方案在opera mobile上根本不起作用。)

1 个答案:

答案 0 :(得分:0)

你在css中尝试了媒体属性吗?

了解链接

CSS3 Media Queries

您可以根据屏幕分辨率使用不同的CSS