javascript - jQueryはBootstrap 3の状態を検出します

Question

Bootstrap 3 には 4 つの状態があります。超小型デバイス、小型デバイス、中型デバイス、および大型デバイス。jQuery を使用して、Web サイトが現在どの状態にあるかを知るにはどうすればよいですか? 超小型デバイスの場合のように処理を実行できるように、この関数を実行します。

ありがとう。

Answer 1

@Khurshidの回答（これは完全にうまく機能します）に従って、大幅に高速なネイティブJavaScript実装を作成しました：

function findBootstrapEnvironment() {
    var envs = ["xs", "sm", "md", "lg"],    
        doc = window.document,
        temp = doc.createElement("div");

    doc.body.appendChild(temp);

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        temp.className = "hidden-" + env;

        if (temp.offsetParent === null) {
            doc.body.removeChild(temp);
            return env;
        }
    }
    return "";
}

Answer 2

ミディアムサイズでも同様のことをしなければなりませんでした。

極小のメディア クエリは最大 480px です。

次のように言うことができます。

if($(document).width > 480)
{

  //Do Something
}