25

我有一个缩放背景图像以适合其容器，并且当 Modernizr 检测到浏览器不支持背景大小时，我有适当的后备（未显示）。

.wrap {
    width: 200px;
    height: 116px;
    position: absolute;
    background-image: url(image.jpg);
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 200px 116px;
    background-repeat: no-repeat;
}

这是一个例子：http: //jsfiddle.net/crowjonah/6xYNm/

它在 Chrome、Firefox、Safari（桌面和 iOS）中看起来很漂亮，但是我在某些 Android 实例上遇到了问题。

这是正确显示的设备的 UA：

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

这是一个不支持的设备的 UA：

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

较新版本的 Android（模拟）将固定的背景图像缩放为全部爆炸和像素化以适应（我认为）视口，并且不注意其容器的大小或定义的background-size.

这一切都很好。事实上，这就是MDN 所说的将会发生的事情：

如果背景的附件是固定的，则背景定位区域是浏览器窗口的整个区域，不包括滚动条覆盖的区域（如果存在）。

我的问题是我不知道如何合理地检测何时会或不会出现这种情况，以便我可以相应地进行调整。由于页面上的布局和动画，我真的希望为所有支持它的浏览器修复背景，并且scroll如果我能弄清楚如何定位它，就可以解决这种极端情况。

更新（2013 年 10 月 3 日）： 为了防止混淆，我更新了小提琴以演示一个更现实和有问题的示例，该示例证明了我定义的更多 CSS 属性：http: //jsfiddle.net/crowjonah /QtpVN/

4

3 回答 3

1

删除background-size添加display:block;

再试一次

于 2013-08-03T01:47:21.033 回答
1

你有没有尝试过

背景图片：url（image.jpg）；背景尺寸：100%；

带走位置：绝对；背景附件：固定；

于 2013-10-03T14:05:11.210 回答
1

您可以在 .works {...} 和 .does_not_work {...} 两个类中准备 CSS，然后通过 JavaScript 进行检查，以回答您遇到的问题。根据结果​​，JavaScript 将只针对上面的这些 CSS 类进行调整。最后，谁会在她的手机（即Android）中关闭JavaScript？你怎么看这个想法？问候，M。

于 2013-05-17T00:55:05.817 回答