#matchmedia

レスポンシブなウェブサイトでJavaScriptを書く必要があったのだけど、 そこでwindow.matchMediaを使うとウィンドウサイズの変更を監視できることを知った。

var mql = window.matchMedia('screen and (min-width: 768px)');

とすると、mqlにMediaQueryListが返ってくる。 matchMedia関数にはCSSで書いているメディアクエリの文字列そのものが渡せる。

mql.matches;

とすると、メディアクエリの条件に一致していた場合にtrueになっている。一致していない場合はfalseになる。

MediaQueryListにはリスナー関数を登録できる関数があって、addListener関数を使うと登録できる。

mql.addListener(function(event) { event.matches; });

登録したリスナー関数は、メディアクエリの条件が変更されたときに呼ばれる。

これでわざわざwindow.onresizeを監視する必要がなくなる。

caniuseによるとIE9以下で使用できない以外は主要ブラウザは使用できるようだ。

Can I use matchMedia?

IE9以下でも使用したい場合はmatchMedia.jsのpolyfillを使う。

<!--[if lt IE 10.0]> <script src="matchMedia.js"></script> <script src="matchMedia.addListener.js"></script> <![endif]-->

で良いと思う。

addListenerのコードを呼んだ感じでは、resizeが起きてから30ms後に登録した関数が呼ばれるようだ。 常に監視などはしていないようなので、パフォーマンスへの影響はそこまで大きくないと思う。

参考：

メディアクエリ

Christian Heilmann :)

Here is a quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand.

...

Mediaqueries are not only applicable to CSS, they are also available in JavaScript. You can even have events firing when they are applied which gives you a much more granular control. If you want a good overview of the JavaScript equivalent of @media or the media attribute, this article introducing matchmedia is a good start.