Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* mediaquery function - test whether a CSS media type or query applies
* author: Scott Jehl
* Copyright (c) 2010 Filament Group, Inc
* MIT license
* Developed as a feature of the EnhanceJS Framework (enhancejs.googlecode.com)
* thx to:
- phpied.com/dynamic-script-and-style-elements-in-ie for inner css text trick
- @paul_irish for fakeBody trick
*/
var mediaquery = (function(doc,undefined){
var cache = {},
docElem = doc.documentElement,
fakeBody = doc.createElement('body'),
testDiv = doc.createElement('div');
testDiv.setAttribute('id','ejs-qtest');
fakeBody.appendChild(testDiv);
return function(q){
if (cache[q] === undefined) {
var styleBlock = doc.createElement('style');
styleBlock.type = 'text/css';
var cssrule = '@media '+q+' { #ejs-qtest { position: absolute; width: 10px; } }';
if (styleBlock.styleSheet){
styleBlock.styleSheet.cssText = cssrule;
}
else {
styleBlock.appendChild(doc.createTextNode(cssrule));
}
docElem.insertBefore(fakeBody, docElem.firstChild);
docElem.insertBefore(styleBlock, docElem.firstChild);
cache[q] = (testDiv.offsetWidth == 10);
docElem.removeChild(fakeBody);
docElem.removeChild(styleBlock);
}
return cache[q];
}
})(document);
/*
* EXAMPLE USAGE
*/
//test 'screen' media type
if(mediaquery('screen')){
//screen media type supported
}
//test a handheld media query
if(mediaquery('screen and (device-max-width: 480px)')){
//smartphone/iphone... maybe run some small-screen related dom scripting?
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.