【JavaScript】レスポンシブ時に読み込むJavaScriptファイルそのものを変えたい！【window.matchMedia】

レスポンシブとはいってもPCとスマホでは全然違うんじゃー！ということがあります。

極めつけは、PCとSPで別々に制作していたサイトを、最後になぜかレスポンシブ（メディアクエリでがっつり読み込みコード切り分け）にしたときでした……。

            $(function () {
                //PCのとき
                if (window.matchMedia('(min-width: 769px)').matches) {
                    //切り替える画面サイズ
                    $.ajax({
                        url: '/js/main.js',
                        dataType: 'script',
                        cache: false
                    });
                    //スマホのとき
                } else {
                    $.ajax({
                        url: '/js/sp.js',
                        dataType: 'script',
                        cache: false
                    });
                }
                ;
            });

window.matchMedia をつかうと、CSSのように華麗なレスポンシブ対応ができるようですね。

IE11+対応で問題ない昨今であれば、onresizeのような荒々しいコードは使わなくていいようです。（使ってた）

 

■参考

 

window.matchMedia をそろそろ活用してもいい頃