Match Media Usage - In Cross Browser and IPhone

Firefox 6 was released recently with support for a few nifty new things including window.matchMedia() - a feature that gives developers the JavaScript equivalent of CSS media queries. This welcome addition has been in the FF nightly channel builds for Aurora since April and has been supported by Google Chrome since m10.

There are a number of ways in which window.matchMedia() can be used right out of the box:

window.matchMedia() itself accepts a media-query string as input and returns back a MediaQueryList interface (http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface).

Some basic usage:

//screen width is 800px or wider

if(window.matchMedia("(min-width: 800px)").matches){}



//orientation of the screen is landscape

if(window.matchMedia("(orientation: landscape)").matches)){}



and with event listeners:

var matched = window.matchMedia("(min-width: 800px)");

function matchHandler(mql) {

if ( mql.matches ) {

// width is 800px or wider

} else {

// width is less than 800px

}

}

matched.addListener(matchHandler);

matchHandler(matched);



matchMedia.js works quite similarly, allowing you to perform basic testing as follows:



if ( matchMedia('only screen and (max-width: 480px)').matches ) {

//possibly an iPhone/Smartphone device.

}

For more information on window.matchMedia() see:
The specs: http://dev.w3.org/csswg/cssom-view/#dom-window-matchmedia

MDN page on matchMedia(): https://developer.mozilla.org/en/CSS/Using_media_queries_from_code

and remember to check out the matchMedia.js repo here: https://github.com/paulirish/matchMedia.js