IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

ウィンドウ幅によってJavaScriptの処理を替えるレスポンシブ対応

JavaScriptでもcss同様にウィンドウサイズでポイントを切り替える方法です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  var timer = false;
  $(window).resize(function() {
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(window.matchMedia("(max-width:500px)").matches){
        alert('500px以下です。'); // 500px以下の処理を記述します
      }else{
        alert('500pxより大きいです。'); // 500pxより大きいときの処理を記述します
      }
    }, 200);
  });
})
</script>

11〜15行目で500pxを切り替えポイントとして、500px以下の場合とより大きい場合の処理の分岐を記述しています。
この記述だけでも実現はしますが、ウィンドウ幅を変えただけでは何も実行されず、切り替えるにはブラウザの更新を必要とします。

resize()でウィンドウ幅の変化にリアルタイムに対応
ウィンドウ幅が変わる都度、ブラウザの更新を必要としないためにresize()を利用します。
これでウィンドウ幅の変化にリアルタイムに反応させることができるようになりますが、ここで問題が。
1pxの変化でもイベントが発生するため、ウィンドウ幅の変化に合わせて点滅しながら処理を繰り返すという目障りな動きをしてしまいます。

setTimeoutを利用して時差をつくる
resize()で起こる問題を解決するためにsetTimeoutを使います。
これにより、イベント感知から少し時間をおいてから処理を実行させることができます。
ウィンドウ幅の変化が終わってから処理実行となるので、先ほどのようなウィンドウ幅の変化に合わせたチラつきがなくなります。

matchMedia対応ブラウザ
matchMedia対応ブラウザ

ほぼほぼ対応されていますが、未対応ブラウザもカバーしたい場合は「matchMedia.js
」を利用すればよいようです。

他にもModernizrを使用する方法があります。
その場合は、少し記述が変わります。「modernizr.js」を読み込むこともお忘れなく。
「modernizr.js」は以下からダウンロードできます。

Modernizr
Modernizr

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/modernizr.js"></script><!-- パスは任意 -->
<script>
$(function(){
  var timer = false;
  $(window).resize(function() {
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(Modernizr.mq("(max-width:500px)")){
        alert('500px以下です。'); // 500px以下の処理を記述します
      }else{
        alert('500pxより大きいです。'); // 500pxより大きいときの処理を記述します
      }
    }, 200);
  });
})
</script>