背景尺寸在 Opera Mini 中不起作用，尽管 Modernizr 认为它应该如此

Question

我正在使用 Modernizr 来检测浏览器是否支持我正在构建的移动网站的 CSS3 属性 background-size。

我正在 Opera 官方网站上的 Opera Mini 6 Simulator 中测试该网站，Modernizr 检测到浏览器支持 background-size 并相应地将“backgroundsize”类添加到 元素中。

但是，当我在 CSS 中使用 background-size 属性时，它不受支持。

这是头部：

<script src="modernizr.js" type="text/javascript"></script>

<style>

body {
  background:url('background.gif') no-repeat 0 0 #FFF;
}

.backgroundsize body {
  -o-background-size: 100% auto;
  background-size: 100% auto;
}  

</style>

主体内容

<p>Content</p>   

<script>
if (Modernizr.backgroundsize == true) {alert("Background size is supported");}  
</script>   

我希望单个背景图像能够拉伸到浏览器的整个宽度，而不是重复；该页面可以在这里看到 - http://so.ajcw.com/mobile.htm

我猜猜发生了五件事之一 - 有谁知道原因并可以提供解决方案吗？

1. Modernizr 无法正常工作，并给出了误报
2. Opera Mini 6 错误地告诉 Modernizr 它支持背景大小，但实际上它不支持
3. 模拟器不是准确的模拟，真正的 Opera Mini 确实支持背景大小
4. 我错误地编写了代码
5. 或者其他什么？

Answer 1

background-size Opera Mini 不支持

Answer 2

我写这个是为了快速解决问题：

var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
    var root = document.documentElement;
    root.className += " opera-mini";
}

它向 html 元素添加了一个“opera-mini”类。因此您可以瞄准 Opera Mini。以下示例：

.icon {
    background-image: url("icon-social.svg");
    background-size: 32px;
}

html.opera-mini .icon,
html.no-svg .icon {
    background-image: url("icon-social.png");
}

查看更多信息：http://anthonydillon.com/blog/#sthash.VUV1hIy2 .dpuf

Answer 3

看来事情已经改变了。适用于我的 Android 版 Opera Mini 7.5。

Modernizr.backgroundsize == true;

它可以正确响应百分比值以及cover 和contain。

Answer 4

@anthony 的答案不起作用，因为它没有重置/删除 Opera Mini 的背景大小属性。正确的方法是：

.class {
  -o-background-size:cover;
  -background-size:cover;
}
x:-o-prefocus, .class {
  -o-background-size:;
  background-size:;
}

x:-o-prefocus 仅针对 Opera 浏览器。