Share

レスポンシブサイトではCSSを切り替えるだけでなく、JSも切り替える必要がある場合があります。ここでは効率的なJS切替テクニックを紹介します。

今回ご紹介するのは、CSSの font-family の値から切替の判断をするというテクニックです。

HTML

まずHTMLです。 font-family を設定する要素を作ります。

<div class="media-queries" data-media-queries=""></div>

CSS

次にCSSです。要素を display: none; で隠します。また、メディアクエリで画面幅に応じて font-family の値を切り替えます。

.media-queries {
    display: none;
    font-family: 'sp'
}
@media screen and (min-width: 768px) {
    .media-queries {
        font-family: 'pc'
    }
}

JS

最後はJSです。jQueryを使用しています。ページ読み込み時とウィンドウ幅切替時に要素の font-family の値を読み取りPC/SPのスクリプトを実行させます。

レスポンシブの各設定
(function(){
    //SPイベント
    function spEvent() {
        console.log('SP版で実行させたいコードをここに書きます。');
    }

    //PCイベント
    function pcEvent() {
        console.log('PC版で実行させたいコードをここに書きます。');
    }

    //レスポンシブ切替処理
    var $mediaQueries = ($('[data-media-queries]').length > 0) ? $('[data-media-queries]') : $('<div>');
    var layout = $mediaQueries.css('font-family').replace(/"/g, '');
    var current;

    //ページ読み込み時にPC／SPイベント発動
    if (layout === 'sp'){
        current = 'sp';
        spEvent();
    } else if (layout === 'pc') {
        current = 'pc';
        pcEvent();
    } else {
        return;
    }

    //ウィンドウサイズ切替時の設定
    var timer = false;
    $(window).on('resize', function(){
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            var layout = $mediaQueries.css('font-family').replace(/"/g, '');
            if (layout === 'sp' && current === 'pc'){
                current = 'sp';
                spEvent();
            } else if (layout === 'pc' && current === 'sp') {
                current = 'pc';
                pcEvent();
            } else {
                return;
            }
        }, 200);
    });
})();