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; } }';
        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] = ((window.getComputedStyle ? window.getComputedStyle(testDiv,null) : testDiv.currentStyle)['position'] == 'absolute');
        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
}

Firefox 4 (currently in beta) will fail the previous version of this function if it is called before document.body is present (even when the query should return true). This fork checks a computed style instead of offsetWidth, which seems to avoid that obscure issue (which will hopefully be fixed before release!).

Props to Opera from 2007, great minds think alike and all that.

indeed :) latest version here btw https://gist.github.com/786768

Your example for smartphone/iphone doesn't work in at least iPhone iOS 3.1.3.

Checked out the newer one and it fails to work in iPhone iOS 3.1.3 too

because the script isn't working right, or just because it's bad sample data?

It appears to be the script, the iPhone doesn't respond to the inserted style before or after load.