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

2018年9月22日

レスポンシブとはいっても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のような荒々しいコードは使わなくていいようです。(使ってた)

 

■参考

レスポンシブサイトに使える!画面サイズで読み込むJavascriptを切り替えるjs

 

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