Skip to content

Instantly share code, notes, and snippets.

@nzakas
Created March 16, 2011 06:05
  • Star 22 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nzakas/08602e7d2ee448be834c to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link
Author

nzakas commented Mar 17, 2011

Ah very cool. I'll take a look.

@paulirish
Copy link

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
Copy link
Author

nzakas commented Apr 8, 2011

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

@StommePoes
Copy link

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