jQuery检测Bootstrap 3状态

Question

在Bootstrap 3中,有4个状态; 超小型设备,小型设备,中型设备和大型设备.我如何才能知道该网站目前处于jQuery的哪个州？这样我就可以像处理超小型设备那样进行处理,然后运行此功能.

谢谢.

Answer 1

我做了一些改动,以这个为引导3,试试这个"

function findBootstrapEnvironment() {
    var envs = ["ExtraSmall", "Small", "Medium", "Large"];
    var envValues = ["xs", "sm", "md", "lg"];

    var $el = $('<div>');
    $el.appendTo($('body'));

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

        $el.addClass('hidden-'+envVal);
        if ($el.is(':hidden')) {
            $el.remove();
            return envs[i]
        }
    };
}

Answer 2

按照@ 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 3

我不得不为中等大小做类似的事情.

超小的媒体查询高达480px;

所以你可以这样说:

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

  //Do Something
}