2017.02.04

【JS】jQueryでブラウザの画面サイズで処理を判定する方法

レスポンシブサイト等で、スマホのときには特定の処理をして、PCの場合は処理をしたくない場合がありますよね。
例えば、スマホではアコーディオンでクリックしたら詳細を表示するけど、PCの場合はアコーディオンを使用せず、詳細を常に表示状態にするなど・・・。
そんなときのための、ブラウザの画面サイズによって、処理をする方法をメモメモ。

読み込み時とリサイズ時の画面サイズによって処理を判定する

$(window).on('load resize', function(){
        var w = $(window).width();
        var x = 768;
        if (w < x) {
//画面サイズが768px未満のときの処理
        } else {
//それ以外のときの処理
        }
      });

リサイズ操作が終わった時だけ処理を実行する

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        console.log('resized');
        // 何らかの処理
    }, 200);
});

【サンプル】スマホ（ブラウザサイズが767以下）の場合はアコーディオン、PC（ブラウザサイズが768以上）の場合はアコーディオンを表示しない。

<div class="accordion">
<div class="accordionTrg">詳細を見る</div>
<div class="accordionDetail">
<!--アコーディオンの詳細-->
</div>
</div>
</div>

//読み込み時
$(function(){
    $(".accordion .accordionTrg").click (function() {
        $(this).toggleClass("active").next().slideToggle();
    });
});
 
//ブラウザ幅変更時の処理
$(window).on('load resize', function(){
 
$(function(){
if($(window).width()<=767){
    $(".accordion .accordionTrg").show();
     
} else {
    $(".accordion .accordionTrg").hide();
    $(".accordion .accordionDetail").after().show();
}
});
 
});

＃jQuery