javascriptで画面サイズ毎に処理をしたい時

こんにちは

今回はjavascriptで画面サイズ毎に処理をしたい時にオススメの方法を紹介します。

メディアクエリを設定するときって

@media screen and (max-width: 767px) { 
  /* スマホ */
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  /* タブレット */
}
@media screen and (min-width:1025px) {
  /*　PC　*/
}

みたいな感じになるかと思います。

そしてjavascriptでスマホの画面サイズ時だけ処理をしたいというときに

$width = window.width()
if ($width < 768) {
  // やりたい処理
}

まずブラウザの横幅を取得してメディアクエリで設定した値と比較します。
ただ、このやり方だと修正が入った時けっこうめんどくさいので
代わりにfont-familyを使います。

こんな感じで設定します。

@media screen and (max-width: 767px) { 
  /* スマホ */
  .l-sizedetect {
    font-family: 'sp';
  }
}
@media screen and (min-width: 768px) and ( max-width: 1024px) {
  /* タブレット */
  .l-sizedetect {
    font-family: 'tablet';
  }
}
@media screen and (min-width:1025px) {
  /*　PC　*/
  .l-sizedetect {
    font-family: 'pc';
  }
}

後はjavascript側でl-sizedetectのcssを取得してやればOKです。

if ($('l-sizedetect').css('font-family') === 'sp') {
  // スマホでやりたい処理
} else if($('l-sizedetect').css('font-family') === 'tablet') {
  // タブレットでやりたい処理
}