Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A function for detecting if the browser is in a given media mode
/*
* 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
}
/*
* 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
}
@paulirish

This comment has been minimized.

Show comment Hide comment
@paulirish

paulirish Mar 17, 2011

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.

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.

@nzakas

This comment has been minimized.

Show comment Hide comment
@nzakas

nzakas Mar 17, 2011

Ah very cool. I'll take a look.

Owner

nzakas commented Mar 17, 2011

Ah very cool. I'll take a look.

@paulirish

This comment has been minimized.

Show comment Hide comment
@paulirish

paulirish Apr 8, 2011

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?

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?

@nzakas

This comment has been minimized.

Show comment Hide comment
@nzakas

nzakas Apr 8, 2011

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

Owner

nzakas commented Apr 8, 2011

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

@StommePoes

This comment has been minimized.

Show comment Hide comment
@StommePoes

StommePoes Aug 27, 2011

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment