【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以上）の場合はアコーディオンを表示しない。

■html

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

■javascript

//読み込み時
$(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();
}
});

});