レスポンシブ（スマフォ対策）向けのJSの振り分け

f:id:showjinx:20160426165655j:plain

ブラウザのウィンドウサイズで判別して読み込むjsファイルをスマートフォン、 PCで振り分ける。

実装例はATOMSさん。

ページ読み込み時にふわっと内容を出現させる別のjsが、なぜかスマホサイズだと（折りたたみハンバーガーメニューと干渉している模様）コンフリクトを起こして余計な余白を画面に発生させてしまうため、ハンバーガーメニューが出てこないタブレット〜PCサイズでの表示でのみ、ふわっとのjsを読み込むようにしました。

ハンバーガーメニューはこちらにお世話になりました。（ありがとうございます）

www.webopixel.net

ふわっとフェードインはこちらにお世話になりました。（ありがとうございます）

on-ze.com

そして本題の振り分けのJSはこちらにお世話になりました。（ありがとうございます）

www.omnioo.com

実際に使用したコードはこちらです。

730の数字がブラウザの幅サイズの指定。上段と下段のブロックは指定するファイルは一緒。単純に数字とsp向け、pc向けファイルの指定をすればそれだけで使えます。

// responsive
var s = document.createElement("script");
s.type = "text/javascript";
$(function(){
    // Window width default
    var egwidth = $(window).width();
    if (egwidth <= 730) { // ウィンドウサイズを指定 = 730px以下
        //alert('sp'+egwidth);
        s.src = ""; // sp向けjsファイルを指定
        document.getElementsByTagName("head")[0].appendChild(s);
    } else if (egwidth > 730) { // ウィンドウサイズを指定 = 731px以上
        //alert('pc'+egwidth);
        s.src = "js/vendor/fade.js"; // pc向けjsファイルを指定
        document.getElementsByTagName("head")[0].appendChild(s);
    }

    // Window width resize with pc
    var timer = false;
    $(window).resize(function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            var egwidth = $(window).width();
            if (egwidth <= 730) { // ウィンドウサイズを指定 = 730px以下

                s.src = ""; // sp向けjsファイルを指定
                document.getElementsByTagName("head")[0].appendChild(s);
                //alert('sp'+egwidth);
            } else if (egwidth > 730) { // ウィンドウサイズを指定 = 731px以上

                s.src = "js/vendor/fade.js"; // pc向けjsファイルを指定
                document.getElementsByTagName("head")[0].appendChild(s);
                //alert('pc'+egwidth);
            }
        }, 200);
    });
});