media query check - matchMedia - moved to https://github.com/paulirish/matchMedia.js

media query check

/*
 * mediaquery function - test whether a CSS media type or query applies
 * author: Scott Jehl
 * Copyright (c) 2010 Filament Group, Inc
 * MIT license
 * Developed as a feature of the EnhanceJS Framework (enhancejs.googlecode.com)
 * thx to: 
   - phpied.com/dynamic-script-and-style-elements-in-ie for inner css text trick 
   - @paul_irish for fakeBody trick 
*/

var mediaquery = (function(doc,undefined){
   var cache = {},
    docElem = doc.documentElement,
    fakeBody = doc.createElement('body'), 
    testDiv = doc.createElement('div');
    
  testDiv.setAttribute('id','ejs-qtest');
  fakeBody.appendChild(testDiv);
    
  return function(q){
    if (cache[q] === undefined) {
      var styleBlock = doc.createElement('style');
      styleBlock.type = 'text/css';
      var cssrule = '@media '+q+' { #ejs-qtest { position: absolute; width: 10px; } }';
      if (styleBlock.styleSheet){ 
          styleBlock.styleSheet.cssText = cssrule;
      } 
      else {
          styleBlock.appendChild(doc.createTextNode(cssrule));
      }      
      docElem.insertBefore(fakeBody, docElem.firstChild);
      docElem.insertBefore(styleBlock, docElem.firstChild);
      cache[q] = (testDiv.offsetWidth == 10);
      docElem.removeChild(fakeBody);
      docElem.removeChild(styleBlock);
    }
    return cache[q];
  }
})(document);


/*
 * EXAMPLE USAGE
*/

//test 'screen' media type
if(mediaquery('screen')){
  //screen media type supported
}

//test a handheld media query
if(mediaquery('screen and (device-max-width: 480px)')){
  //smartphone/iphone... maybe run some small-screen related dom scripting?
}

Eivind Uggedal has apparently fixed a bug with IE8 on this. https://gist.github.com/747277
I haven't yet confirmed this issue.

And scott reports https://gist.github.com/710855/8649f3df8f151624500782e4d6915194d2560c5e is the last version to successfully work in IE..

And scott fixed it all! Style elem needs the type attribute! https://gist.github.com/786768/

Updated things here.. most notably

• fixed the return value
• removed caching (caching isnt very responsive)

I'd still like to pull some ideas from nicholas https://gist.github.com/08602e7d2ee448be834c

And now I've pulled in nicholas' techniques from https://gist.github.com/08602e7d2ee448be834c Mucho better!

Tested in Chrome, FF3.6, IE6 so far.

This has moved to https://github.com/paulirish/matchMedia.js