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

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) {
//処理
}

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