Media QueriesのブレークポイントでJavaScriptを実行する方法

Media Queriesのブレークポイントの切り替え時に、JavaScriptの処理を実行したいときの方法を考えてみました。

サンプルコード1(失敗例)

まずは$(window).width()を使った場合の失敗例です。

HTML

<div id="contents">コンテンツ中身</div>

CSS

ブレークポイントを480pxと960pxに設定して、それぞれ背景色を変更します。

#contents {
	background: #E74C3C;
}
@media screen and (min-width: 480px) {
	#contents {
		background: #2ECC71;
	}
}
@media screen and (min-width: 960px) {
	#contents {
		background: #3498DB;
	}
}

JavaScript

画面幅をconsole.logで表示します。

$(function() {
	$(window).on('resize', function() {
		var windowWidth = $(window).width();
		if(windowWidth < 480) {
			console.log('spです' + windowWidth);
		} else if(windowWidth < 960) {
			console.log('tbです' + windowWidth);
		} else {
			console.log('pcです' + windowWidth);
		}
	});
});

背景が切り替わるブレークポイントの幅(480px、960px)と、背景が切り替わるときのconsole.logの数値が10～20pxほどずれています。
これはMedia Queriesのブレークポイントがスクロールバーを含めた画面幅なのに対して、$(window).width()はスクロールバーを省いた画面幅を取得しているためです。
Media QueriesのブレークポイントでJavaScriptを実行するデモページ(うまくいっていない例)

サンプルコード2

ブレークポイントの確認用に空要素を追加して、ブレークポイント毎に要素の表示非表示を切り替えます。

HTML

<div id="contents">コンテンツ中身</div>

<div id="breakpoint-check">
<div class="breakpoint-pc"></div>
<div class="breakpoint-tb"></div>
<div class="breakpoint-sp"></div>
</div>

CSS

#contents {
	background: #E74C3C;
}
#breakpoint-check .breakpoint-pc {
	display: none;
}
#breakpoint-check .breakpoint-tb {
	display: none;
}
#breakpoint-check .breakpoint-sp {
	display: block;
}
@media screen and (min-width: 480px) {
	#contents {
		background: #2ECC71;
	}
	#breakpoint-check .breakpoint-tb {
		display: block;
	}
	#breakpoint-check .breakpoint-sp {
		display: none;
	}
}
@media screen and (min-width: 960px) {
	#contents {
		background: #3498DB;
	}
	#breakpoint-check .breakpoint-tb {
		display: none;
	}
	#breakpoint-check .breakpoint-pc {
		display: block;
	}
}

JavaScript

$(window).width()ではなく、どの要素が表示されているかでブレークポイントを判断するようにします。

$(function() {
	$(window).on('resize', function() {
		var windowWidth = $(window).width();
		if($('#breakpoint-check .breakpoint-sp').is(':visible')) {
			console.log('spです' + windowWidth);
		} else if($('#breakpoint-check .breakpoint-tb').is(':visible')) {
			console.log('tbです' + windowWidth);
		} else {
			console.log('pcです' + windowWidth);
		}
	});
});

console.logの数値部分は$(window).width()のままなのでブレークポイントとずれたままですが、テキスト部分はブレークポイントと一致するようになりました。
Media QueriesのブレークポイントでJavaScriptを実行するデモページ