matchMediaをつかってデバイスサイズ別のjavascriptを適用させる方法

FRONTEND

2019.04.2

cssであればメディアクエリをつかってデバイスサイズに応じたcssを適用させることは簡単です。では、javascriptの場合はどうでしょう?

javascriptではwindow.matchMediaというメソッドをつかって、設定したブレイクポイントごとに適用させるjavascriptを変えることができます。

他にも色々方法はあると思うのですが、このwindow.matchMediaをつかった方法が一番簡単なのではないでしょうか。

window.matchMediaをつかった実装例

<script type="text/javascript">
jQuery(document).ready(function($) {
	//768px以上の場合
if (window.matchMedia( '(min-width: 768px)' ).matches) {
$(function(){
	//768px以上のときのjavascriptをここに記述
});
	//767px以下の場合
} else {
$(function(){
	//767px以下のときのjavascriptをここに記述
});
};
});
</script>