1

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

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

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

这是头部：

<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. 或者是其他东西？
4

4 回答 4

2

background-sizeOpera Mini 不支持

于 2011-10-13T04:21:54.627 回答
1

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

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

于 2014-01-09T09:12:08.507 回答
1

似乎情况发生了变化。对于我在 Android 上的 Opera Mini 7.5。

Modernizr.backgroundsize == true;

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

于 2014-04-11T11:42:39.637 回答
0

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

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

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

于 2014-03-13T20:18:52.717 回答