Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* 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; } }';
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] = ((window.getComputedStyle ? window.getComputedStyle(testDiv,null) : testDiv.currentStyle)['position'] == 'absolute');
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
}
@scottjehl

This comment has been minimized.

Copy link
Owner Author

commented Aug 30, 2010

Firefox 4 (currently in beta) will fail the previous version of this function if it is called before document.body is present (even when the query should return true). This fork checks a computed style instead of offsetWidth, which seems to avoid that obscure issue (which will hopefully be fixed before release!).

@jdalton

This comment has been minimized.

Copy link

commented Feb 22, 2011

Props to Opera from 2007, great minds think alike and all that.

@scottjehl

This comment has been minimized.

Copy link
Owner Author

commented Feb 22, 2011

indeed :) latest version here btw https://gist.github.com/786768

@jdalton

This comment has been minimized.

Copy link

commented Feb 22, 2011

Your example for smartphone/iphone doesn't work in at least iPhone iOS 3.1.3.

@jdalton

This comment has been minimized.

Copy link

commented Feb 22, 2011

Checked out the newer one and it fails to work in iPhone iOS 3.1.3 too

@scottjehl

This comment has been minimized.

Copy link
Owner Author

commented Feb 22, 2011

because the script isn't working right, or just because it's bad sample data?

@jdalton

This comment has been minimized.

Copy link

commented Feb 22, 2011

It appears to be the script, the iPhone doesn't respond to the inserted style before or after load.

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.