android - 背景附件:固定干扰背景大小

Question

我有一个缩放背景图像以适合其容器，当 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(模拟)将固定的背景图像缩放为全部爆炸和像素化以适应(我认为)视口(viewport)，并且不注意其容器的大小或定义的 背景-size.

这一切都很好。其实就是这样 MDN says will happen :

If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.

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

更新(2013 年 10 月 3 日):为了防止混淆，我更新了 fiddle 以演示一个更现实和有问题的示例，证明我定义的更多 CSS 属性是正确的:http://jsfiddle.net/crowjonah/QtpVN/

Answer 1

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