【发布时间】：2013-05-12 00:10:57
【问题描述】：
我已缩放背景图像以适合其容器内，并且当 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 says will happen:
如果背景的附件是固定的，则背景定位区域是浏览器窗口的整个区域，不包括滚动条所覆盖的区域（如果存在）。
我的问题是我不知道如何合理地检测何时会或不会出现这种情况，以便我可以做出相应的调整。由于页面上的布局和动画，我真的希望为所有支持它的浏览器修复背景，如果我能弄清楚如何定位它，可以在这种外围情况下解决scroll。
更新（2013 年 10 月 3 日）： 为了防止混淆，我更新了 fiddle 以演示一个更现实和有问题的示例，证明我定义的更多 CSS 属性是正确的：http://jsfiddle.net/crowjonah/QtpVN/
【问题讨论】：
-
作为参考，我的问题好像和this one一样。
-
是的：jsfiddle.net/crowjonah/6xYNm/13 有问题的 Android 模拟器通过了 Modernizr 的 backgroundsize 测试。
-
你试过这个吗CSS For All Web Browser 我在一些项目中使用了那个东西
-
我想避免 UA 嗅探，因为我最终会导致网络过于广泛，或者不够广泛：如果我使用您链接到目标 Android 的类似 javascript 库的东西，移动设备，Safari，后备将适用于比实际需要更多的用户。或者，如果我匹配确切有问题的 UA，很可能会有其他变体遭受同样的问题。
标签： android mobile-safari css background-attachment