[解決済み] JavaScriptを使用してTwitter Bootstrap 3のレスポンシブブレークポイントを検出する方法は？

質問

現在 の場合、Twitter Bootstrap 3 のレスポンシブブレークポイントは次のとおりです。768px、992px、1200px で、それぞれ小型、中型、大型のデバイスを表しています。

JavaScriptを使用してこれらのブレークポイントを検出するにはどうすればよいですか。

画面が変化したときに発生するすべての関連イベントを、JavaScriptでリッスンしたいと思います。また、画面が小型、中型、大型のデバイス用かどうかを検出できるようにしたいです。

何か既にあるのでしょうか？あなたの提案は何ですか？

どのように解決するのですか？

Edit: このライブラリはBowerとNPMから利用できるようになりました。詳しくはgithub repoをご覧ください。

回答を更新しました。

• ライブの例です。 コードペン
• 最新版です。 Github リポジトリ
• Bootstrapはお嫌いですか？確認してください。 ファンデーションデモ そして カスタムフレームワーク デモ
• 問題がありますか？ 問題を開く

免責事項：私は著者です。

最新版（Responsive Bootstrap Toolkit 2.5.0）を使ってできることをいくつか紹介します。

// Wrap everything in an IIFE
(function($, viewport){

    // Executes only in XS breakpoint
    if( viewport.is('xs') ) {
        // ...
    }

    // Executes in SM, MD and LG breakpoints
    if( viewport.is('>=sm') ) {
        // ...
    }

    // Executes in XS and SM breakpoints
    if( viewport.is('<md') ) {
        // ...
    }

    // Execute only after document has fully loaded
    $(document).ready(function() {
        if( viewport.is('xs') ) {
            // ...
        }
    });

    // Execute code each time window size changes
    $(window).resize(
        viewport.changed(function() {
            if( viewport.is('xs') ) {
                // ...
            }
        })
    ); 

})(jQuery, ResponsiveBootstrapToolkit);

バージョン 2.3.0 以降では、4 つの <div> 要素は必要ありません。

オリジナルの回答です。

そのために巨大なスクリプトやライブラリが必要だとは思えません。かなり簡単な作業です。

の直前に以下の要素を挿入します。 </body> :

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

これら4つのdivで、現在アクティブなブレークポイントをチェックすることができます。JSを簡単に検出するためには、以下の関数を使用します。

function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

これで、使用できる最小のブレークポイントでのみ、あるアクションを実行するようになりました。

if( isBreakpoint('xs') ) {
    $('.someClass').css('property', 'value');
}

DOM ready の後の変化を検出するのも、かなり簡単です。必要なのは、このような軽量なウィンドウ リサイズ リスナーだけです。

var waitForFinalEvent = function () {
      var b = {};
      return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d)
      }
    }();

var fullDateString = new Date();

これを装備したら、変更をリッスンし始め、ブレークポイントに特化した関数をこのように実行することができます。

$(window).resize(function () {
    waitForFinalEvent(function(){

        if( isBreakpoint('xs') ) {
            $('.someClass').css('property', 'value');
        }

    }, 300, fullDateString.getTime())
});