background-attachment:固定干扰背景大小

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(模拟)将固定的背景图像缩放为全部图像并按像素化以便适合(我认为)视口,并且不会注意其容器或定义的大小background-size.

这一切都很好.事实上,这就是MDN所说的将会发生的事情:

如果背景的附件是固定的,则背景定位区域是浏览器窗口的整个区域,不包括滚动条所覆盖的区域(如果它们存在).

我的问题是我不知道如何合理地检测何时会发生或不会发生这种情况,以便我可以相应地进行调整.由于页面上的布局和动画,我确实希望为所有支持它的浏览器修复背景,并且scroll如果我能弄清楚如何定位它,可以在这种异常情况下解决.

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

Answer 1

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