$(window).resize()は使わず、window.matchMediaを使って、jsでのメディアクエリー的な事をしてみよう的なお話

cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。
けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、
$(window).width()で条件分岐してあげるって考えるけど、
画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、
resizeはwindowサイズが変わるたびにイベント発火するし、
そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。

まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、
それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。
ということで今日はそのwindow.matchMedia()の使い方についてをば。

$(document).ready(function(){
  if(window.matchMedia("(max-width:640px)").matches){
    // ①windowの読み込みが完了したときに、640px以下の場合に行いたいもの
  }
  else{
    // ②windowの読み込みが完了したときに、641px以上の場合に行いたいもの
  }
  
  function matchFunction(){
    // ③windowサイズを変更して、640px以下になったら発火するイベント
    console.log("hoge");

    if(window.matchMedia("(min-width:640px)").matches){
      // ④windowサイズを変更して、641px以上になったら発火するイベント
      console.log("hogehoge");
    }
  }
  window.matchMedia("(max-width:640px)").addListener(matchFunction);
});

こんな感じでやると、window読み込み完了時とかwindowサイズを変更したらイベントが発火するようになる。
①と②はwindow読み込み完了時、③と④はwindowサイズを変更したらって感じ。
windowサイズを変更したらっていうのを考慮しないのであれば①と②だけで十分。

③と④ではwindowサイズを変更すると都度発火するので、onなどを使う場合は都度offしないとダメ。

あんまり用途としては微妙なところでもあるけど、実は知っておくと便利的な。
特に画像をpc用とsp用と分けている場合はこれで簡単に変更出来るみたいな。