matchMediaを変数に入れて複数箇所で使用する

matchMediaを変数に入れて複数箇所で使用としたときに少し詰まったので、やり方をメモしておきます。

サンプルコード

640px以下と641px以上で要素を出し分けるようにしてみます。

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;
	}
}

matchMediaを変数に入れて、リサイズイベントで使ってみます。

JavaScript

var isSp = window.matchMedia('(max-width: 640px)').matches;
var isPc = window.matchMedia('(min-width: 641px)').matches;

window.addEventListener('resize', function (event) {
	if(isSp) {
		console.log('SPサイズ');
	}
	if(isPc) {
		console.log('PCサイズ');
	}
});

このやり方だと、リサイズを行ってもアクセスした時点の値から変更されませんでした。
matchMediaのデモページ

matchesを使った時点で条件に一致するかの判定を行い、true/falseの値を格納しているのが原因でした。
変数に入れるのはwindow.matchMedia()までにするとよさそうです。

JavaScript

var isSp = window.matchMedia('(max-width: 640px)');
var isPc = window.matchMedia('(min-width: 641px)');

window.addEventListener('resize', function (event) {
	if(isSp.matches) {
		console.log('SPサイズ');
	}
	if(isPc.matches) {
		console.log('PCサイズ');
	}
});

matchMediaのデモページ2