jQuery 检测 Bootstrap 3 状态答案

【问题标题】：jQuery detect Bootstrap 3 statejQuery 检测 Bootstrap 3 状态
【发布时间】：2013-10-28 01:33:55
【问题描述】：

在 Bootstrap 3 中，有 4 个状态；超小型设备、小型设备、中型设备和大型设备。我如何知道网站当前处于 jQuery 的哪个状态？这样我就可以在超小型设备中进行一些处理，然后运行此函数。

谢谢。

【问题讨论】：

stackoverflow.com/questions/9477028/…
谢谢。我的意思是有任何直接访问从引导程序知道而不是直接检测宽度？

标签： javascript jquery css responsive-design twitter-bootstrap-3

【解决方案1】：

我必须为中等大小做一些类似的事情。

超小号的媒体查询最大为480px；

所以你可以这样说：

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

  //Do Something
}

【讨论】：

这是迄今为止我遇到的最好的和最重要的解决方案。造成这种情况的主要原因是除了开发人员会切换浏览器宽度来测试响应行为之外，没有人会这样做！站点用户一次将使用一个设备，台式机、平板电脑或手持设备。我认为建议将此解决方案牢记在心！
您仍然会让用户更改浏览器端，例如将其拖到第二个屏幕或更改其大小，以便他们可以看到下面的窗口和其他用户案例。但这是一个简单的示例，只是提醒人们..检查宽度..
很好的答案！谢谢。

【解决方案2】：

我对引导程序 3 的 this 进行了一些更改，试试这个”

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]
        }
    };
}

【讨论】：

你应该声明$el并且不要污染全局范围。

【解决方案3】：

按照@Khurshid 的回答（效果很好），我编写了一个原生 JavaScript 实现，它是 significantly faster：

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 "";
}

【讨论】：

我不得不承认，我通常认为用原生替换简单的 jQuery 调用是不必要的微优化。绝对没有预料到这种比较会显示出 90% 以上的性能差异。
工作得很好，但在 IE 上它似乎总是返回 "xs" :S
对于 IE 支持，我使用了if($(this.dom.temp).is(':hidden')) { $(this.dom.temp).remove(); return env; } 而不是if (temp.offsetParent === null) { doc.body.removeChild(temp); return env; }
为了使这段代码与 Bootstrap v4 兼容，将 "xl" 添加到 'envs' 数组并将 temp.className = "hidden-" + env; 更改为 temp.className = "hidden-" + env + "-up";
@dburdan 听起来很懒惰，我很高兴你编辑我的解决方案并附上你的名字。

【解决方案4】：

Bootstrap 4 版本：

function findBootstrapEnvironment() {
    var envs = ["sm", "md", "lg", "xl"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));
    $el.addClass("d-block");
    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");
        if ($el.is(":hidden")) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return "xs";    //extra small
}

【讨论】：