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（模拟）将固定背景图像缩放为全部图像并按像素化以适合（我认为）视口，并且不会注意其容器或定义的{{1}的大小}。

这一切都很好。事实上，这就是MDN says will happen：

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

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

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

Answer 1

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

Answer 2

删除background-size添加display:block;

再试一次

Answer 3

你试过吗

背景图像：网址（image.jpg的）; background-size：100％;

拿走位置：绝对; background-attachment：fixed;

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

3 个答案: