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

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

我已经尝试了 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 上根本不起作用。)

最佳答案

你试过 media 属性在 css 中吗?

她的链接

CSS3 Media Queries

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

关于css - 背景总是填满浏览器窗口,即使在移动浏览器上也是如此?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7802285/

相关文章:

iphone - @font-face 在移动 Webkit 中不工作

jquery 不会更改隐藏在 CSS 中的表单中的输入值

css - 如何让 HTTPS 域拉入 CSS 数据?

html - <ul> 中 <li> 元素的自定义元素符号是常规字符,而不是图像

html - 为什么溢出滚动在移动 webkit 中的 html 标签上不起作用?

Javascript Onclick window.open 弹出窗口在 Firefox 和 Safari 中不起作用

css - 如何在 div 标签背景中设置 100%?

JavaScript 可能会干扰 CSS 三级导航系统

javascript - 如何创建一个简单的启动画面/页面?

html - Firefox 不在禁用的输入字段上显示工具提示