ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

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

Sponsored Links

f:id:showjinx:20160426165655j:plain

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

実装例はATOMSさん。

atoms-inc.com

ページ読み込み時にふわっと内容を出現させる別の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);
    });
});

コードを参照させていただいた記事内でも言及されていますが、PCの場合、閲覧している最中にブラウザのウィンドウ幅を変えると通常の幅サイズの取得では対応出来ないため、上記のように「レスポンシブ」向けと「PCでウィンドウ幅を変更した場合」で分けて読み込みのjsファイルを指定しています。

この実装例ではPC向けでのみ読み込むファイルを指定すればよかったのでスマートデバイス向けのところは空白になっています。