A function for detecting if the browser is in a given media mode

isMedia() function

/*
 * Copyright 2011 Nicholas C. Zakas. All rights reserved.
 * Licensed under BSD License.
 *
 * This function determines if the browser is currently in a particular media
 * media mode. Use the same media query as you would in CSS or on a <link>
 * element. 
 *
 * The theory is the same as many CSS detection techniques:
 * 1. Create a hidden <div> with a specific ID.
 * 2. Add a <style> element with a media query.
 * 3. See if the style was applied to the div. 
 *
 * The function accepts a single argument, the media query string, and returns true
 * if the browser is currently in the given media mode or false if not. Note that
 * this is limited to the browser's support for CSS media queries. IE < 9, for
 * example only supports simple media types like "screen" and "print", so any
 * advanced queries will always return false. For this reason, this method's
 * purpose is to determine if the given browser understands the media query AND
 * the media mode is active.
 *
 * This function works back through IE6.
 */

var isMedia = (function(){

    var div;
	
	return function(query){
		if (!div){
			div = document.createElement("div");
			div.id = "ncz1";
			div.style.cssText = "position:absolute;top:-1000px";
			document.body.insertBefore(div, document.body.firstChild);			
		}
	
		div.innerHTML = "_<style media=\"" + query + "\"> #ncz1 { width: 1px; }</style>";
		div.removeChild(div.firstChild);
		return div.offsetWidth == 1;	
	};
})();

/*
 * Simple usage, just pass in a CSS media query.
 */
if (isMedia("screen and (max-width:800px)"){
    //do something for the screen
}

if (isMedia("all and (orientation:portrait)")){
    //react to portrait mode
}

isMediafunction

/*
 * Copyright 2011 Nicholas C. Zakas. All rights reserved.
 * Licensed under BSD License.
 *
 * This function determines if the browser is currently in a particular media
 * media mode. Use the same media query as you would in CSS or on a <link>
 * element. 
 *
 * The theory is the same as many CSS detection techniques:
 * 1. Create a hidden <div> with a specific ID.
 * 2. Add a <style> element with a media query.
 * 3. See if the style was applied to the div. 
 *
 * The function accepts a single argument, the media query string, and returns true
 * if the browser is currently in the given media mode or false if not. Note that
 * this is limited to the browser's support for CSS media queries. IE < 9, for
 * example only supports simple media types like "screen" and "print", so any
 * advanced queries will always return false. For this reason, this method's
 * purpose is to determine if the given browser understands the media query AND
 * the media mode is active.
 *
 * This function works back through IE6.
 */

var isMedia = (function(){

    var div;
	
	return function(query){
		if (!div){
			div = document.createElement("div");
			div.id = "ncz1";
			div.style.cssText = "position:absolute;top:-1000px";
			document.body.insertBefore(div, document.body.firstChild);			
		}
	
		div.innerHTML = "_<style media=\"" + query + "\"> #ncz1 { width: 1px; }</style>";
		div.removeChild(div.firstChild);
		return div.offsetWidth == 1;	
	};
})();

/*
 * Simple usage, just pass in a CSS media query.
 */
if (isMedia("screen and (max-width:800px)")){
    //do something for the screen
}

if (isMedia("all and (orientation:portrait)")){
    //react to portrait mode
}

Scott Jehl and I have been working on a similar snippet for a while https://gist.github.com/786768

it's actually a polyfill for matchMedia() which is already in webkit.

I like these techniques though.. i think we could probably merge the two.

Ah very cool. I'll take a look.

So I've been trying to figure out that underscore but I think I just put the pieces together..
See ryan seddon's comments on noScope here: https://github.com/ryanseddon/Modernizr/blob/0d41ebab/modernizr.js#L121-125

is that right, nicholas?

Yup that's right. The underscore can really be any scoped element.

You need another closing parens in the example's first if
if (isMedia("screen and (max-width:800px)")) {