Skip to content

Instantly share code, notes, and snippets.

Forked from uggedal/matchMedia.js
Created January 19, 2011 20:10
Show Gist options
  • Save scottjehl/786768 to your computer and use it in GitHub Desktop.
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
* which webkit now supports:
* 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');
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 {
docElem.insertBefore(fakeBody, docElem.firstChild);
docElem.insertBefore(styleBlock, docElem.firstChild);
cache[q] = ((window.getComputedStyle ? window.getComputedStyle(testDiv,null) : testDiv.currentStyle)['position'] == 'absolute');
return cache[q];
Copy link

Copy link

nzakas commented Mar 17, 2011

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?

Copy link

Yeah agreed. I'd rather update this script to return a

{ matches: bool, media : mediaQueryStr } 

to make it a proper polyfill.

Copy link

Over at 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)

Copy link

And it's about time to move this from gists to a repo: :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment