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
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31