如何使用Twitter Bootstrap API检测您正在使用的设备视图？
我刚刚开始使用Twitter Bootstrap API来开发一个项目。 主导航包含三个主要元素：
- 网站导航
- 社交链接导航
- search网站表单
在移动设备上查看网站时，我正在使用折叠插件折叠站点导航和search表单。 移动视图有2个button，当点击切换search表单或主导航开/关。
但是，如果我切换search表单，然后调整我的浏览器到桌面视图的search窗体仍然隐藏在这个视图？
我已阅读有关使用类，如可见移动等，但这些似乎与崩溃插件冲突。 我也意识到我可以写我自己的CSS黑客来解决这个问题，但我想问问是否有一个更简单的解决scheme。
Bootstrap有显示，显示，隐藏和隐藏的事件，所以我想也许我可以写一些自定义JS来显示或隐藏这些项目在每个特定的设备视图。 但是，我不知道如何检测当时使用的设备。
思考？
提前致谢
如果你想知道你在使用什么环境，可以尝试使用Bootstrap自己的CSS类。 创build一个元素，将其添加到页面，应用其帮助类，并检查它是否隐藏，以确定是否是当前的环境。 下面的函数使用jQuery来做到这一点：
Bootstrap 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; } } } Bootstrap 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; } } }
build立在@Raphael_和@ user568109的答案，在Bootstrap 3中，现在内置了响应。
要在Javascript中检测设备types，请使用Bootstrap的响应类创build一个仅显示在所需设备上的对象。 然后检查它的:hidden属性。
例：
-
创build一个没有内容的
<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 }
基于@Alastair McCormack的答案，我build议你使用这个代码
<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的最后，即可获得有关当前视图的简单dynamic信息。
我原本在这里发布的答案 ， Bootstrap v.4的解决scheme。
Bootstrap 4，JS断点检测
/** * Detect and return the current active responsive breakpoint in Bootstrap * @returns {string} */ 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("hidden-" + env + "-up"); if ($el.is(":hidden")) { break; // env detected } } $el.remove(); return env; }
我的答案是使用类似于@Raphael_提供的机制，但是，您可以使用它来做更多的工作。 请参考这个答案的细节和项目的最新版本的github存储库 。
断点检测示例：
if ( viewport.is('xs') ) { // do stuff in the lowest resolution }
在窗口大小上执行代码（在毫秒范围内不会发生多次）：
$(window).bind('resize', function() { viewport.changed(function() { // do some other stuff! }) });
Bootstrap 4
（目前用于Beta，希望未来版本也可以）
这是一个基于rmobis （Bootstrap 2/3）和Farside （Bootstrap 4 alpha）解决scheme的修改版本
/* * Detect and return the current active responsive breakpoint in Bootstrap 4 * * @returns {string} * xs: Extra small (< 576px) * sm: Small (576px ≥ X < 768px) * md: Medium (768px ≥ X < 992px) * lg: Large (992px ≥ X < 1200px) * xl: Extra large (≥ 1200 px) */ function getResponsiveBreakpoint() { 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 }
结合上面的答案，这个为我工作：
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]+'"> </div>'); $el.appendTo($('body')); if ($el.is(':hidden')) { $el.remove(); return dsize[i]; } } return 'unknown'; }
