Javascriptの処理をスクリーンサイズで切り替える方法

Yuichiro Suzuki

9年前

はじめに

メディアクエリを利用しスクリーンサイズでCSSを変更させる方法は一般化されていますが、Javascriptの処理を変更させる方法はあまり一般化されてはいません。

そこで今回は、Javascriptの処理をwindow.matchMediaを利用し切り替える方法をご紹介したいと思います。

window.matchMediaとは

window.matchMediaとは、MediaQueryList オブジェクトを返すメソッドです。

このメソッドを利用することにより、CSS のメディアクエリを扱う感覚でJavascriptの処理をスクリーンサイズによって切り替えることが可能となります。

使い方は、以下の条件分岐に当てはめるだけです。


if (window.matchMedia( "(min-width: 400px)" ).matches) {
  /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
  /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}

では実際にサンプルを用いてwindow.matchMediaを実装してみたいと思います。

window.matchMediaデモ

window.matchMediaを利用してJavascriptの処理をスクリーンサイズで切り替えてみます。

ご紹介するデモは、window.matchMediaを利用し、実装したカルーセル内の画像の数を800px以上では３つに、800px以下では１つに表示させれるようにします。

//元のスクリプト
<script>
jQuery("document").ready(function(){

jQuery('.single-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 3, //表示する画像の数を３つにする
    slidesToScroll: 3
  });
});
</script>

元のスクリプトを800px以下で表示させるとカルーセル内で表示される画像は３つのままです。

そこで800px以下で表示されるカルーセル内の画像数を変更するためにスクリプトを以下のように書き換えます。

<script>

if (window.matchMedia('screen and (min-width:800px)').matches) {
	//800px以上のデスクトップでの処理

jQuery("document").ready(function(){

jQuery('.single-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 3,  //表示する画像の数を３つにする
    slidesToScroll: 3
  });
}); 

}else{
        //スクリーンサイズが800pxより小さい時の処理

jQuery("document").ready(function(){

jQuery('.single-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 1,  //表示する画像の数を1つにする
    slidesToScroll: 1
  });
}); 

	}
</script>

書き換え後、カルーセル内の画像の数が800px以上では３つに、800px以下では１つになりました。

これで成功です。

まとめ

いかかでしたでしょうか？
window.matchMediaを利用すればJavascriptの処理をスクリーンサイズで簡単に切り替えることが可能です。

これにより、今回のデモでご紹介したカルーセル内の画像数を変更させたり、スライドショーの表示スピードをスクリーンサイズで変更させたりとレスポンシブでの表現の幅を広げることができます。

ご観覧ありがとうございました！！