CSSとJSでブレイクポイントがずれる時の処理を使いやすくする

Javascript

前にCSSと同じpx数をブレイクポイントで指定するとjQueryでずれるという記事を書いたのですが、その中でIE9ではCSSを使ってウインドウサイズを合わせていました。

その処理を毎度ウインドウをリサイズする処理の度に書いていたのですが、タブレットのサイズも含めるとさすがに効率が悪いので使いやすくしました。

HTMLの生成と判定

まずはウインドウサイズ判別ようのHTMLを生成。そこのCSSを調べる指定を書きます。

JQuery

$(function(){
  var winMode;
  $('body').append('<div class="winSize"></div>');//bodyの直前に判別用のHTMLを生成

  function winSize(){
    var winSize1 = $('.winSize').css('display');
    var winSize2 = $('.winSize').css('float');
    if(winSize1 == 'none' && winSize2 == 'none'){
      winMode = 'ds';
    }else if(winSize1 == 'block' && winSize2 == 'left'){
      winMode = 'tb';
    }else {
      winMode = 'sp';
    }
  }
});

CSS

今回は0~767pxまでがスマートフォンサイズ。768px~959pxまでがタブレットサイズ。それ以上をデスクトップサイズとしましたので、CSSでは以下の様に記述し判別に使います。


.winSize {
display: none;
float: none;
}

@media only screen and (max-width: 959px) {
.winSize {
display: block;
float: left;
}
}

@media only screen and (max-width: 767px) {
.winSize {
display: block;
float: none;
}

処理をしたい箇所で関数を実行して判別する

こちらのJSとCSSをそれぞれのファイルの記述します。あとはJSの処理をしたい部分で以下のように書くだけで判別できます。

JQuery

$(window).on('resize load',function(){
  winSize();//上記の関数を実行
  if(winMode == 'ds'){
    //デスクトップモードの処理
  }
  if(winMode == 'tb'){
    //タブレットモードの処理
  }
  if(winMode == 'sp'){
    //スマートフォンモードの処理
  }
});

こちらで毎回ウインドウサイズに関する処理を書かなくてすみます。

ただし上記を使うのはIE9まで

ただ前の記事でも書きましたが、対象ブラウザがIE10からであればこのような記述はいらずJSの以下を記述だけですみます。

if (window.matchMedia('(min-width: 768px)').matches) {
  //処理
}

すごいスマートです・・・。