paulirish/matchMedia.js — Issue #9: mediaquery checked only once?
Author: mroemer
Created: 2012-03-01 10:24:17+00:00
State: open

Hi Paul,

i think the script may not behave totally according to the spec. Either that or the native implementations in Firefox and Chrome do more than specified by the spec.

What I do is setting up some MediaQueryList objects with the window.matchMedia Method:
var my_mql = window.matchMedia("only screen and (max-width: 500px)")

Then later, while the page is being displayed to the user, I want to check if the page currently satisfies the query:
if (my_mql.matches) ...

In Firefox and Chrome this works fine, but in Opera which uses the polyfill, it does not.
I think this is because the polyfill evaluates the query only one time while being created, while the native implementations seem to evaluate it on every method call.

I fumbled around with your script and ended up with this change:

> return function(q){
>
> function matches() {
> div.innerHTML = '­';
>
> docElem.insertBefore(fakeBody, refNode);
> div.removeChild(div.firstChild);
> bool = div.offsetWidth == 42;
> docElem.removeChild(fakeBody);
> return bool;
> }
>
> return { matches: matches, media: q };
> };