css - 背景总是填满浏览器窗口，即使在移动浏览器上也是如此？

Question

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

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

将手机从横向转到纵向时，行为基本相同；在上面的示例 URL 中很难看到，因为背景将刚好填满该示例中的高度。当文本较长时，它会以相同的方式中断。

Android 2.2.1版本，内置webkit浏览器。

Opera mobile 的行为不同，但同样错误:当我滚动时，有半秒的延迟，然后背景跳转。而且背景只占高度的 80% 左右，所以屏幕顶部或底部有一个白色 block 。 (这是“img on a lower z-index”解决方案；css3 background-size 解决方案在 Opera Mobile 上根本不起作用。)

Answer 1

你试过 media 属性在 css 中吗？

她的链接

CSS3 Media Queries

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