javascriptのmatchMediaについて

久しぶりにフロントのことをやったらmatchMediaのことをすっかり忘れていたので自分用にメモ。 ついでに簡易的に関数化してみる使いやすくしようと思う。

/*
* @param string media : 'screen and (max-width: 750px)' etc...
* @param function func : callback function
* @param boolean loaded : default 'undefined'
*/
function setMatchMedia(media, func, loaded) {
  const mm = window.matchMedia(media);
  mm.addEventListener('change',function(e){
    if(e.matches){
      func();
    }
  },false);

  if(loaded){
    // 3rd argument is true
    if(mm.matches){
      func();
    }
  }
}

// SP sample
// 初回に判定したい場合には第3引数にtrueを入れる
setMatchMedia('screen and (max-width:559px)',function(){
    console.log('sp_view');
},true)

// TABLET sample
setMatchMedia('screen and (min-width:560px) and (max-width:959px)',function(){
    console.log('tab_view');
})

// PC sample
setMatchMedia('screen and (min-width:960px)',function(){
    console.log('pc_view');
})

コメントにも書いている通り、初回の動作をつけたいときは第3引数にtrueを入れると関数設定時に判定するようになります。 DOMContentLoadedのタイミングなどで実行してあげると一番いいのかもしれません。

超簡易的なものなので穴があれば教えていただければありがたいです。

ではまた。