media query check - media.matchMedium.js

/*
 * media.matchMedium()- test whether a CSS media type or media query applies
 * primary author: Scott Jehl
 * Copyright (c) 2010 Filament Group, Inc
 * MIT license
 
 * adapted by Paul Irish to use the matchMedium API
 *    http://www.w3.org/TR/cssom-view/#media
 * Doesn't implement media.type as there's no way for crossbrowser property
 *    getters. instead of media.type == 'tv' just use media.matchMedium('tv')
 
 * 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 
*/

if ( !(window.media && media.matchMedium) ){
  
  window.media = window.media || {};
  media.matchMedium = (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 'tv' media type
if (media.matchMedium('tv')) {
  // tv media type supported
}

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

//test landscape orientation
if (media.matchMedium('(orientation:landscape)')) {
  // probably tablet in widescreen view
}

Todo. match the updated spec:
http://dev.w3.org/csswg/cssom-view/#dom-window-matchmedia

Also relevant bug:
btw: https://bugzilla.mozilla.org/show_bug.cgi?id=595845

also scott's update is better than this one: http://gist.github.com/557891