CODEWITHSUNDEEP
javascriptcross-browsermedia-queriesmodernizr
阳光Emi
阳光Emi

Reputation: 143

Why I can't detect Media Queries in IE9 using modernizr

I searched support of CSS3 Media Queries in browsers, and IE9+ support it, http://caniuse.com/css-mediaqueries, but when I use Modernizr to detect it, it turns out, ie7-ie9 not support it, ie10 support it. What I do is :

  1. generate custom modernizr js: http://modernizr.com/download/#-mq-teststyles-load

  2. html code: below is my code in the html head, I want to detect if the browser support for the min-width media query use, if it support, add support.js, if not, include nosupport.js

    <script src="modernizr.custom.03829.js" type="text/javascript"></script>
<script>
    Modernizr.load({
        test: Modernizr.mq('(min-width: 0px)'),
        yep: 'support.js',
        nope: 'nosupport.js'
    });
</script>

  3. In support.js: alert("support");

  4. In nonosupport.js: alert("not support");

Result: ie7-ie9 alert "not support", in ie10, alert "support". I think ie9 also should alert "support", right? Is there something wrong with my code?

Another weird thing is if I USE the sample usage from http://modernizr.com/docs/#mq :

Modernizr.mq('only screen and (max-width: 768px)')  // true

Chrom, firefox and IE7-10 will alert "not support", I think modern browsers should alert "support". Why?

Upvotes: 1

Views: 1059

Answers (1)

Patrick
Patrick

Reputation: 13974

On your first question - I am not able to replicate. Modernizr.mq('(min-width: 0px)') returns true in IE 9 for me. Check your document mode in the F12 tools to see if you are falling back to a non standards mode.

On your second, browser modernness has nothing to do with wether or not it will return true. Modernizr.mq tests if the browser matches a media query. If it is false, that means that the browser window is larger than 768 pixels.

Upvotes: 1

Related Questions