window.mediaMatchで3デバイス判定

• mediaMatchで3デバイス判定と切替時のイベントをまとめる
• メディアクエリはサイトによって書き換え

サンプルコード

// メディアチェック
let medias = {
    winobj:[],
    query:[
        'screen and (max-width: 559px)', //SP
        'screen and (max-width: 959px) and (min-width: 560px)', //TABLET
        'screen and (min-width: 960px)', //PC
    ],
    removeSpace: function(s) {
        // スペースを除去するやつ
        return s.replace(/\s/g,'');
    }
};

// 切り替えイベント
function checkBreak(query){
    if(medias.removeSpace(query.media) === medias.removeSpace(medias.query[0]) && query.matches === true){
        // spの処理
        console.log( 'sp' );
    }
    if(medias.removeSpace(query.media) === medias.removeSpace(medias.query[1]) && query.matches === true){
        // tabの処理
        console.log( 'tab' );
    }
    if(medias.removeSpace(query.media) === medias.removeSpace(medias.query[2]) && query.matches === true){
        // pcの処理
        console.log( 'pc' );
    }
}

// ロード時実行
document.addEventListener('DOMContentLoaded',function(){
    for(let i=0;i<medias.query.length;i++){
        medias.winobj[i] = window.matchMedia(medias.query[i]);
        medias.winobj[i].addListener(checkBreak);
    }    
});

ちょっと課題点

スペースを含む以下のif部分。
もっと簡易なmatchを生成してよりメディアクエリ部分に特化したifのがブラウザの変更とかにはつよそーだなーと思ったり。

medias.removeSpace(query.media) === medias.removeSpace(medias.query[0]) && ~

ブラウザ確認

Chrome 76.0
Firefox 69.0
Safari 12.1

偉大なる参考

window.matchMedia をそろそろ活用してもいい頃
【続々】window.matchMedia を用いたブレイクポイントイベント
Matching multiple CSS media queries using window.matchMedia()