Question

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

我正在the official Opera website上的 Opera Mini 6模拟器中测试该网站，并且Modernizr检测到浏览器支持background-size并将类“后台大小”添加到相应地<html>元素。

然而，当我在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

我想其中有五件事发生了 - 有谁知道原因，可以提供解决方案吗？

Modernizr无法正常工作并且给出了误报
Opera Mini 6错误地告诉Modernizr它不支持背景大小
模拟器不是一个精确的模拟，真正的Opera Mini支持背景大小
我的代码编写错误
还是其他什么？

Answer 1

background-size是not supported in 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浏览器。

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

4 个答案: