public

  • Download Gist
media query check - media.matchMedium.js
JavaScript
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
/*
* media.matchMedium()- test whether a CSS media type or media query applies
* primary author: Scott Jehl
* Copyright (c) 2010 Filament Group, Inc
* MIT license
* adapted by Paul Irish to use the matchMedium API
* http://www.w3.org/TR/cssom-view/#media
* Doesn't implement media.type as there's no way for crossbrowser property
* getters. instead of media.type == 'tv' just use media.matchMedium('tv')
* 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
*/
 
if ( !(window.media && media.matchMedium) ){
window.media = window.media || {};
media.matchMedium = (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 'tv' media type
if (media.matchMedium('tv')) {
// tv media type supported
}
 
//test a mobile device media query
if (media.matchMedium('screen and (device-max-width: 480px)')) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
}
 
//test landscape orientation
if (media.matchMedium('(orientation:landscape)')) {
// probably tablet in widescreen view
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.