如何使用 Twitter Bootstrap API 检测您正在使用的设备视图？

Posted 2023-02-24

【中文标题】如何使用 Twitter Bootstrap API 检测您正在使用的设备视图？

【英文标题】：How to detect which device view you're on using Twitter Bootstrap API?

【发布时间】：2013-01-04 16:10:33

【问题描述】：

我刚刚开始为我即将推出的项目使用 Twitter Bootstrap API。主导航包含 3 个主要元素：

网站导航 社交链接导航 搜索网站表单

在移动设备上查看网站时，我正在使用折叠插件折叠网站导航和搜索表单。移动视图有 2 个按钮，单击这些按钮可以打开/关闭搜索表单或主导航。

但是，如果我关闭搜索表单，然后将浏览器大小调整为桌面视图，搜索表单是否仍隐藏在此视图中？

我已经阅读了有关使用可见移动等类的信息，但这些似乎与折叠插件发生冲突。我也意识到我可能会编写自己的 CSS hack 来解决这个问题，但我想我会问是否有更简单的解决方案。

Bootstrap 有显示、显示、隐藏和隐藏的事件，所以我想也许我可以编写一些自定义 JS，在每个特定的设备视图中显示或隐藏这些项目。但是我当时不知道如何检测我正在使用的设备。

想法？

提前致谢

【问题讨论】：

您可能还想使用这个小小的snippet，它直接在页面顶部显示当前设备类型。

【参考方案1】：

如果您想知道您所处的环境，请尝试使用 Bootstrap 自己的 CSS 类。创建一个元素，将其添加到页面，应用它的帮助类并检查它是否隐藏以确定这是否是当前环境。下面的函数就是这样做的：

引导程序 4

function findBootstrapEnvironment() 
    let envs = ['xs', 'sm', 'md', 'lg', 'xl'];

    let el = document.createElement('div');
    document.body.appendChild(el);

    let curEnv = envs.shift();

    for (let env of envs.reverse()) 
        el.classList.add(`d-$env-none`);

        if (window.getComputedStyle(el).display === 'none') 
            curEnv = env;
            break;
        
    

    document.body.removeChild(el);
    return curEnv;

---

引导程序 3

function findBootstrapEnvironment() 
    var envs = ['xs', 'sm', 'md', 'lg'];

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

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

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) 
            $el.remove();
            return env;
        
    

---

引导程序 2

function findBootstrapEnvironment() 
    var envs = ['phone', 'tablet', 'desktop'];

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

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

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) 
            $el.remove();
            return env;
        
    

【讨论】：

除了动态检查标记之外，是否有任何 javascript API 可以获取此详细信息？

似乎不工作，总是返回未定义，根据 Bootstrap 3.0，使用这个数组：["xs", "sm", "md", "lg"]

@EaswaramoorthyKanagaraj，我相信在考虑 CSS 等效性时，最好的是 window.matchMedia，但它尚未得到广泛支持。

@Davincho 这要求您在每个页面上手动包含特定标记，这肯定不是一个好的权衡。

@vandenn3 这会更容易，只是不那么准确。 $('body').width() 和 window.document.body.clientWidth 在媒体查询时都不会考虑滚动条的宽度。您可能会争辩说，修复就像添加滚动条宽度一样简单，但不同操作系统上的不同浏览器具有不同的滚动条宽度。此外，这样您就不必依赖默认断点，即使您更改了它们也能正常工作。

【参考方案2】：

基于 @Raphael_ 和 @user568109 的答案，在 Bootstrap 3 中，现在内置了响应式。

要在 Javascript 中检测设备类型，请使用 Bootstrap 的响应类创建一个仅在所需设备上显示的对象。然后检查它的:hidden 属性。

例子：

创建一个<div> 面板，其中不包含任何会在比 eXtra Small 设备更大的设备上显示的内容（感谢 @Mario Awad）：

<div id="desktopTest" class="hidden-xs"></div>

或，排除特定设备：

<div id="desktopTest" class="visible-sm visible-md visible-lg"></div>

检查#desktopTest的值：

if ($('#desktopTest').is(':hidden')) 
    // device is == eXtra Small
 else 
    // device is >= SMaller 

【讨论】：

Bootstrap 3 的好答案。微小的改进：将类替换为：class="hidden-xs"。做和你一样的事情，但更短，更易读。干杯。

感谢@MarioAwad，我已经更新了我的答案以包含您的建议

除了动态检查标记之外，是否有任何 Javascript API 可以获取此详细信息？

@EaswaramoorthyKanagaraj，我不知道有一个。您可以在 Javascript 中动态添加div，然后检查其可见性

@AlastairMcCormack 感谢您的回复。但这看起来有点骇人听闻，而不是直接的方式......

【参考方案3】：

结合上面的答案，这个对我有用：

function findBootstrapDeviceSize() 
  var dsize = ['lg', 'md', 'sm', 'xs'];
  for (var i = dsize.length - 1; i >= 0; i--) 

    // Need to add   for Chrome. Works fine in Firefox/Safari/Opera without it.
    // Chrome seem to have an issue with empty div's
    $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'">&nbsp;</div>');
    $el.appendTo($('body'));

    if ($el.is(':hidden')) 
      $el.remove();
      return dsize[i];
    
  

  return 'unknown';

【讨论】：

不工作。在我的 chrome 笔记本电脑和手机上都返回“xs”。

【参考方案4】：

我的回答是使用类似于@Raphael_ 提出的机制，但是，你可以用它做更多的事情。详情请参考this answer，最新版本请参考项目github repository。

断点检测示例：

if ( viewport.is('xs') ) 
  // do stuff in the lowest resolution

在调整窗口大小时执行代码（在几毫秒内不会发生多次）：

$(window).bind('resize', function() 
    viewport.changed(function() 

      // do some other stuff!

    )
);

【参考方案5】：

原答案： 基于@Alastair McCormack 的回答，我建议您使用此代码

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

只需将它添加到容器 div 的末尾，您将获得有关当前视图的简单动态信息。

更新（2019-03-03）： 以前的代码与 Bootstrap 4 不兼容，因为所有 hidden-* 和 visible-* 类已被删除。在这里，您有可以使用的新代码，与 Bootstrap 3 和 Bootstrap 4 版本兼容（部分归功于 this SO answer）：

<div class="visible-xs hidden-sm hidden-md hidden-lg hidden-xl d-block d-sm-none">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg hidden-xl d-none d-sm-block d-md-none">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg hidden-xl d-none d-md-block d-lg-none">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg hidden-xl d-none d-lg-block d-xl-none">lg</div>
<div class="hidden-xs hidden-sm hidden-md hidden-lg visible-xl d-none d-xl-block">xl</div>

您可以使用this fiddle 对其进行测试。

请注意，我也包含了 hidden-xl 和 visible-xl，但我相信任何 Bootstrap 版本都没有真正使用它们。

【讨论】：

超级简单。我喜欢这个。

是的，就是这样。 OP 询问“如何检测我当时使用的设备”，我相信这是一个快速有效的解决方案。我总是使用它，并在需要调试代码时将其注释掉（或将其包装在隐藏的 div 中）。

你说得对：Boostrap 4 中删除了原来的可见和隐藏类。我更新了答案。

【参考方案6】：

我原来posted answer here，Bootstrap v.4.x的解决方案。

Twitter Bootstrap 4.1.x 的 JS 断点检测

Bootstrap v.4.0.0（以及最新版本Bootstrap 4.1.x）引入了更新的grid options，所以旧的检测概念可能不直接被应用（见the migration instructions）：

在768px 下方添加了一个新的sm 网格层，以实现更精细的控制。我们现在有xs、sm、md、lg 和xl； xs 网格类已修改为不需要中缀。

我编写了一个小型实用函数，它尊重更新的网格类名称和新的网格层：

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns string
 * @author farside @link https://***.com/users/4354249/farside
 */
function getResponsiveBreakpoint() 
    var envs = xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none";
    var env = "";

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

    for (var i = Object.keys(envs).length - 1; i >= 0; i--) 
        env = Object.keys(envs)[i];
        $el.addClass(envs[env]);
        if ($el.is(":hidden")) 
            break; // env detected
        
    
    $el.remove();
    return env;
;

Bootstrap v4-beta 的 JS 断点检测

最新的 Bootstrap v4-alpha 和 Bootstrap v4-beta 在网格断点上有不同的方法，所以这里是实现相同的旧方法：

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns string
 * @author farside @link https://***.com/users/4354249/farside
 */
function getResponsiveBreakpoint() 
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

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

    for (var i = envs.length - 1; i >= 0; i--) 
        env = envs[i];
        $el.addClass("d-" + env + "-none");;
        if ($el.is(":hidden")) 
            break; // env detected
        
    
    $el.remove();
    return env;

我认为它会很有用，因为它很容易集成到任何项目中。它使用 Bootstrap 本身的原生 responsive display classes。

【讨论】：

Bootstrap 4 beta 改变了类 - 他们使用 d-*-none 代替 hidden-*-up。这是适用于 Bootstrap 4 beta 的版本 - gist.github.com/gurubobnz/115d6fb64eb59c6f057a09fd53c721c0

谢谢@GuruBob，我更新了答案！答案最初是在 4-alpha 到位时创建的；）

绝对精彩。出色的实施。谢谢YouDoer.com :)

【参考方案7】：

利基案例，但您可以将@Kar.ma 应用于安装了 Chameleon（引导皮肤）的 Mediawiki。将 DIV 的“结果”作为模板参数传递，然后在模板中对其进行测试。