matchMediaを使ってみる

以前Media QueriesのブレークポイントでJavaScriptを実行する方法という記事を書きましたが、matchMediaというメソッドを使用すると同じような事ができるようなので試してみました。

対応ブラウザ

matchMediaが対応しているブラウザはこちら。
IE10からの対応になります。

サンプルコード

CSSで要素の出し分けを行ってみます。

HTML

<div class="pc">PCサイズ</div>
<div class="sp">SPサイズ</div>

CSS

@media (max-width: 640px) {
	.pc {
		display: none;
	}
}
@media (min-width: 641px) {
	.sp {
		display: none;
	}
}

JavaScript

上記で設定したCSSに合わせてconsoleを出すようにしてみます。

window.addEventListener('resize', function (event) {
	if(window.matchMedia('(max-width: 640px)').matches) {
		console.log('SPサイズ');
	}
	if(window.matchMedia('(min-width: 641px)').matches) {
		console.log('PCサイズ');
	}
});

リサイズする毎にウインドウサイズに応じたconsoleを表示するようになりました。
matchMediaを使ってみるのデモページ
　

【参考サイト】

• [JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法 ｜ memocarilog