-
-
Save scottjehl/786768 to your computer and use it in GitHub Desktop.
| /* | |
| * matchMedia() polyfill - 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 matchMedia API | |
| * http://dev.w3.org/csswg/cssom-view/#dom-window-matchmedia | |
| * which webkit now supports: http://trac.webkit.org/changeset/72552 | |
| * | |
| * Doesn't implement media.type as there's no way for crossbrowser property | |
| * getters. instead of media.type == 'tv' just use media.matchMedium('tv') | |
| */ | |
| if ( !(window.matchMedia) ){ | |
| window.matchMedia = (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'), | |
| cssrule = '@media '+q+' { #ejs-qtest { position: absolute; } }'; | |
| //must set type for IE! | |
| styleBlock.type = "text/css"; | |
| 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); | |
| } |
zakas has a similar script https://gist.github.com/08602e7d2ee448be834c
If I'm reading the documentation correctly, matchMedia() should return a MediaQueryList object rather than a Boolean, so this function really isn't a shim for the official one. Perhaps a name change would be useful to disambiguate?
Yeah agreed. I'd rather update this script to return a
{ matches: bool, media : mediaQueryStr }
to make it a proper polyfill.
Over at https://gist.github.com/710855 I've fixed the return value, removed caching (caching isnt very responsive) and cleaned things up a bit.
I've also merged in Nicholas's work.
(I used the git interface so I was able to retain my gist # and this full git history. wooot)
And it's about time to move this from gists to a repo: https://github.com/paulirish/matchMedia.js :)
Note: jdalton reported there may be an iphone incompat here https://gist.github.com/557891#gistcomment-21794
unconfirmed.