matchMediaを使ったresize処理

resizeイベント

「resize()」はウィンドウサイズの変化を検出するメソッドで、windowオブジェクトに対して実行します。

$(window).resize(function(){
$('body').css('background-color','#F00');
});

window.matchMedia

window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。

$(window).resize(function(){
if (window.matchMedia('(min-width:600px)').matches) {
//pcの時の処理
$('#sp-nav').css('display','block');
}else {
//spの時の処理
$('#sp-nav').css('display','none');
};
});

iOSの処理

iOSはresizeの発生が画面の幅だけで無く、高さが変わった際にも発火してしまう為、resize時に「幅の変更」があった場合にのみ動くようにする必要があります。

iOS用の記述を追加したもの

let windowWidth = $(window).innerWidth();
//windowをリサイズした時
$(window).resize(function(){
//resize毎に画面の幅を取得
let currentWidth = $(window).innerWidth();
if(currentWidth == windowWidth){
//画面の幅が変わっていない時は処理を終了
return;
}else{
if(window.matchMedia('(min-width:600px)').matches){
//pcの時の処理
$('#sp-nav').css('display','block');
}else {
//spの時の処理
$('#sp-nav').css('display','none');
}
}
});