Question

I do have a HTML5 document that uses media queries. To cater for users of older browser I was just trying to emulate the behavior in JS and use modernizr 2.5.3 (the file i got from the HTML5 Boilerplate download yesterday) to do the mq-testing.

Another thing I’d like to do is change the UI a little if the client supports touch events using simple Modernizr.touch.

I do this the following way:

//$window is $(window)
if ($window.width() < 575 || Modernizr.touch){ 
    //change UI layout a little
}

if (Modernizr.touch){ 
    //enable tap-navigation for touch devices
}

if (!Modernizr.mq('only all and (min-width: 575px)')){ //fix non-media query browsers

    $window.resize(function(){

    if ($window.width() < 575){
        //add CSS
    } else {
        //remove CSS
    }).trigger('resize');

}

This works fine in Webkit (mobile and desktop) and Firefox, yet when I try to open the page in Opera (11.6) or the Internet Explorer (7 to 9) hell breaks loose. Events will fire a random number of time, jQuery animations will stop halfway through, to be honest I have no clue what could be going on (no console errors though). When I remove the modernizr script in the head of my page, it is working just fine (except for the feature detection of course…).

What I am also doing is using the html5shiv (I’m loading this after the modernizr, yet still in the head) like:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I’d suspect this to be the culprit in case IE breaks, but since this should take no effect on Opera’s behavior, I am a little clueless.

Am I doing something wrong or is this some kind of bug and I should look for another way to do my feature detection?

EDIT:

While I am trying to find out what is happening I found out the following: What seems to be root of all evil is just the media query test: Modernizr.mq('only all and (min-width: 575px)'). As soon as this is called things go crazy. I can jot this into the console and will get the right result, yet it seems to break something in some weird way. Also, I can break a running page (that hasn’t called this before) by calling this from the console.

EDIT No. 2:

While searching for an alternative way to handle the feature testing I found this library over at dev.opera that (wow!) seems to work fine in Opera. Yet it does not work in IE (Webkit and Firefox are fine) as it complains about:

style.innerText = '@media ' + str + ' { #'+id+' { display:none !important; } }';

Meh.

EDIT No. 3:

So I just downgraded to modernizr 2.0.6 and things are working just fine in all browsers now. Although I’m still not sure if this is a bug or I am doing something wrong, so I’ll rather wait some time before I answer this myself.

Answer 1

Ok, I tried everything I could to get this to work. I made sure I had the latest release of Modernizr, I isolated all of my js and left only the bare minimum on the page, still nothing works.

As a last resort I looked through the source code of Modernizr. In the mq method, another project is cited matchMedia. The matchMediaproject is by one of the Modernizr contributors, Paul Irish. In fact, Modernizr will call mediaMatch if it already exists on the page in place of its own Media Query test. So I downloaded matchMedia.js and added it to my project and that fixed my problem.

   //From moderizr source, remarks are my notes.
    testMediaQuery = function( mq ) {

   //if matchMedia or msMatchMedia return the matchMedia result, else execute modernizr code
          var matchMedia = window.matchMedia || window.msMatchMedia; 
          if ( matchMedia ) {
            return matchMedia(mq).matches;
          }
    //if mediaMatch is not found the moderizr version of this method executes...

You can get matchMedia.js here, https://github.com/paulirish/matchMedia.js

Update:
I regenerated a custom build of 2.5.3 and it works with out matchMedia.js.