Web制作で役立つメモをWEB MEMO LOG

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();
}
});
 
});

About Site

同じことを何度も検索していたりするんで、検索して解決したことを残そうと思いまして。