Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View 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
}
View 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
}

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.

Owner

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?

Owner

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)")) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.