Background size not working in Opera Mini despite Modernizr thinking it should_问答_开发者

Background size not working in Opera Mini despite Modernizr thinking it should

开发者 https://www.devze.com 2023-04-12 08:51 出处：网络

I am using Modernizr to detect whether browsers support the CSS3 property background-size for a mobile site I\'m building.

I am using Modernizr to detect whether browsers support the CSS3 property background-size for a mobile site I'm building.

I'm testing the site in the Opera Mini 6 Simulator on the official Opera website, and Modernizr detects that the browser supports background-size and adds the class 'backgroundsize' to the <html> element accordingly.

However when I then use the background-size property in my CSS it is not supported.

Here's the head:

<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>

And the body co开发者_JAVA百科ntent

<p>Content</p>   

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

I am expecting the single background image to be stretched across the full width of the browser, instead it repeats; the page can be seen here - http://so.ajcw.com/mobile.htm

I guess one of five things has happened - does anyone know the reason and can offer a solution?

Modernizr does not work properly and has given a false positive
Opera Mini 6 incorrectly tells Modernizr it supports background-size when it doen't
The simulator is not an accurate emulation and the real Opera Mini does support background-size
I have written my code incorrectly
Or something else?

background-size is not supported in Opera Mini

I wrote this as a quick work around:

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

It add's a class "opera-mini" to the html element. Therefore you can target Opera Mini. An example below:

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

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

See more at: http://anthonydillon.com/blog/#sthash.VUV1hIy2.dpuf

It seems things have changed. For my Opera Mini 7.5 on Android.

Modernizr.backgroundsize == true;

And it responds correctly to percentage values as well as to cover and contain.

@anthony's answer doesn't work as it's not resetting / removing the background-size property for Opera Mini. The correct way to do this is:

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

The x:-o-prefocus targets just Opera browsers.

Background size not working in Opera Mini despite Modernizr thinking it should

精彩评论

关注公众号

热门标签

图文推荐

Background size not working in Opera Mini despite Modernizr thinking it should

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：