secret
Last active

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

  • Download Gist
isMedia() function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
/*
* 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
/*
* 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)")) {

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.