How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

如果你没有特殊的需求，你可以这样做:

if ($(window).width() < 768) {
// do something for small screens
}
else if ($(window).width() >= 768 &&  $(window).width() <= 992) {
// do something for medium screens
}
else if ($(window).width() > 992 &&  $(window).width() <= 1200) {
// do something for big screens
}
else  {
// do something for huge screens
}

编辑: 我不明白为什么你应该使用另一个 js 库，当你可以做到这一点，只是与 jQuery 已经包含在你的 Bootstrap 项目。

你看过 Response.js 吗? 它就是为这种事情设计的。组合 Response.band 和 Response.resize。

Http://responsejs.com/

Response.resize(function() {
if ( Response.band(1200) )
{
// 1200+
}
else if ( Response.band(992) )
{
// 992+
}
else if ( Response.band(768) )
{
// 768+
}
else
{
// 0->768
}
});

像@oozic 提到的那种手动实现应该没有问题。

下面是一些你可以看看的例子:

• JQuery 插件-使用 html 数据属性，还有一个 js api。
• Js -enquire.js 是一个轻量级的纯 JavaScript 库，用于响应 CSS 媒体查询
• SimpleStateManager -一个针对响应性网站的 javascript 状态管理器。

请注意，这些库的设计独立于引导程序、基础等。您可以配置自己的断点，并从中获得乐趣。

与使用 $(document) . width ()不同，您应该设置一个提供此信息的 CSS 规则。

我只是写了一篇文章来准确地得到它

您可能希望将其添加到引导程序项目中，以便可视地检查活动断点

    <script type='text/javascript'>


$(document).ready(function () {


var mode;


$('<div class="mode-informer label-info" style="z-index:1000;position: fixed;bottom:10px;left:10px">%mode%</div>').appendTo('body');




var checkMode = function () {


if ($(window).width() < 768) {
return 'xs';
}
else if ($(window).width() >= 768 && $(window).width() < 992) {
return 'sm';
}
else if ($(window).width() >= 992 && $(window).width() < 1200) {
return 'md';
}
else {
return 'lg';
}
};


var compareMode = function () {
if (mode !== checkMode()) {
mode = checkMode();


$('.mode-informer').text(mode).animate({
bottom: '100'
}, 100, function () {
$('.mode-informer').animate({bottom: 10}, 100)
});
}
};


$(window).on('resize', function () {
compareMode()
});


compareMode();


});


</script>

这是 翘臀

为什么不使用 jQuery 来检测引导容器类的当前 css 宽度呢？

也就是说。

if( parseInt($('#container').css('width')) > 1200 ){
// do something for desktop screens
}

你也可以使用 $(window) . resize ()来防止你的布局“弄脏了床”，如果有人调整了浏览器窗口的大小。

编辑: 这个库现在可以通过 Bower 和 NPM 获得。详情请参阅 github repo。

更新答案:

• 实例: CodePen
• 最新版本: Github 仓库
• 不喜欢 Bootstrap? 检查: 基础演示和 定制框架演示
• 有问题吗

免责声明: 我是作者。

下面是使用最新版本(Responsive Bootstrap Toolkit 2.5.0)可以做的一些事情:

// Wrap everything in an IIFE
(function($, viewport){


// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}


// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}


// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}


// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});


// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);


})(jQuery, ResponsiveBootstrapToolkit);

在2.3.0版本中，您不需要下面提到的四个 <div>元素。

原答案:

我不认为您需要任何大型脚本或库来完成这个任务，这是一个相当简单的任务。

在 </body>之前插入以下元素:

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

这4个 div 允许您检查当前活动的断点:

function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}

现在，只在可以使用的最小断点上执行某个操作:

if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}

在 DOM 准备好之后检测更改也相当简单。所有您需要的是一个轻量级的窗口大小调整侦听器，如下所示:

var waitForFinalEvent = function () {
var b = {};
return function (c, d, a) {
a || (a = "I am a banana!");
b[a] && clearTimeout(b[a]);
b[a] = setTimeout(c, d)
}
}();


var fullDateString = new Date();

一旦配备了它，您就可以开始监听更改并执行特定于断点的函数，如下所示:

$(window).resize(function () {
waitForFinalEvent(function(){


if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}


}, 300, fullDateString.getTime())
});

对 回应使用这种方法更好。在每个窗口调整大小时，调整触发器的大小，只有在断点更改时才会触发交叉

Response.create({
prop : "width",
breakpoints : [1200, 992, 768, 480, 320, 0]
});


Response.crossover('width', function() {
if (Response.band(1200)) {
// 1200+


} else if (Response.band(992)) {
// 992+


} else if (Response.band(768)) {
// 768+


} else if (Response.band(480)) {
//480+


} else {
// 0->320


}
});


Response.ready(function() {
$(window).trigger('resize');
});

基于 Maciej Gurban 的答案(这个答案太棒了... ... 如果你喜欢这个，请给他的答案投上一票)。如果正在构建要查询的服务，可以通过下面的设置返回当前活动的服务。这可以完全替代其他断点检测库(如果放入一些事件，比如 enquire.js)。注意，我已经为 DOM 元素添加了一个 ID 容器，以加快 DOM 遍历。

超文本标示语言

<div id="detect-breakpoints">
<div class="breakpoint device-xs visible-xs"></div>
<div class="breakpoint device-sm visible-sm"></div>
<div class="breakpoint device-md visible-md"></div>
<div class="breakpoint device-lg visible-lg"></div>
</div>

咖啡字条(AngularJS，但这是很容易转换)

# this simple service allows us to query for the currently active breakpoint of our responsive app
myModule = angular.module('module').factory 'BreakpointService', ($log) ->


# alias could be: xs, sm, md, lg or any over breakpoint grid prefix from Bootstrap 3
isBreakpoint: (alias) ->
return $('#detect-breakpoints .device-' + alias).is(':visible')


# returns xs, sm, md, or lg
getBreakpoint: ->
currentBreakpoint = undefined
$visibleElement = $('#detect-breakpoints .breakpoint:visible')
breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']]
# note: _. is the lodash library
_.each breakpointStringsArray, (breakpoint) ->
if $visibleElement.hasClass(breakpoint[0])
currentBreakpoint = breakpoint[1]
return currentBreakpoint

JAVASCRIPT (AngularJS)

var myModule;


myModule = angular.module('modules').factory('BreakpointService', function($log) {
return {
isBreakpoint: function(alias) {
return $('#detect-breakpoints .device-' + alias).is(':visible');
},
getBreakpoint: function() {
var $visibleElement, breakpointStringsArray, currentBreakpoint;
currentBreakpoint = void 0;
$visibleElement = $('#detect-breakpoints .breakpoint:visible');
breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']];
_.each(breakpointStringsArray, function(breakpoint) {
if ($visibleElement.hasClass(breakpoint[0])) {
currentBreakpoint = breakpoint[1];
}
});
return currentBreakpoint;
}
};
});

可以使用窗口大小和断点的硬编码。使用角度:

angular
.module('components.responsiveDetection', [])
.factory('ResponsiveDetection', function ($window) {
return {
getBreakpoint: function () {
var w = $window.innerWidth;
if (w < 768) {
return 'xs';
} else if (w < 992) {
return 'sm';
} else if (w < 1200) {
return 'md';
} else {
return 'lg';
}
}
};
});

我已经开发了一个原生 jQuery 方法来检测 Bootstrap 屏幕大小，如下所示:

// Screen size ID will be stored in this variable (global var for JS)
var CurrentBootstrapScreenSize = 'unknown';


$(document).ready(function () {


// <div> objects for all screen sizes required for screen size detection.
// These <div> is hidden for users eyes.
var currentScreenSizeDetectorObjects = $('<div>').css({
'position':'absolute',
'top':'-200px'
}).addClass('current-screen-size').append([
$('<div>').addClass('device-xs visible-xs').html('&nbsp;'),
$('<div>').addClass('device-sm visible-sm').html('&nbsp;'),
$('<div>').addClass('device-md visible-md').html('&nbsp;'),
$('<div>').addClass('device-lg visible-lg').html('&nbsp;')
]);


// Attach <div> objects to <body>
$('body').prepend(currentScreenSizeDetectorObjects);


// Core method for detector
function currentScreenSizeDetectorMethod() {
$(currentScreenSizeDetectorObjects).find('div').each(function() {
var className = $(this).attr('class');
if($(this).is(':visible')) {
if(String(className).match(/device-xs/)) CurrentBootstrapScreenSize = 'xs';
else if(String(className).match(/device-sm/)) CurrentBootstrapScreenSize = 'sm';
else if(String(className).match(/device-md/)) CurrentBootstrapScreenSize = 'md';
else if(String(className).match(/device-lg/)) CurrentBootstrapScreenSize = 'lg';
else CurrentBootstrapScreenSize = 'unknown';
};
})
console.log('Current Bootstrap screen size is: '+CurrentBootstrapScreenSize);
$('.CurrentBootstrapScreenSize').first().html('Bootstrap current screen size: <b>' + CurrentBootstrapScreenSize + '</b>' );
}


// Bind screen size and orientation change
$(window).bind("resize orientationchange", function() {
// Execute screen detection
currentScreenSizeDetectorMethod();
});


// Execute screen detection on page initialize
currentScreenSizeDetectorMethod();


});

https://jsfiddle.net/pstepniewski/7dz6ubus/

JSFillde 作为全屏示例: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/

我没有足够的声誉点来评论，但是对于那些在尝试使用 Maciej GUrban 的 ResponsiveToolKit 时遇到“不被认可”问题的人来说，我也得到了这个错误，直到我注意到 Maciej 实际上在他的 CodePen 页面底部引用了这个工具包

我试过了，突然起作用了！因此，使用 ResponsiveToolkit，但是把你的链接放在页面的底部:

我不知道这有什么区别，但确实有区别。

不要在每一页多次插入下面的内容..。

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

只要使用 JavaScript 动态地将它插入到每个页面中(注意，我已经更新了它，使它能够与 Bootstrap 3和 .visible-*-block一起工作:

// Make it easy to detect screen sizes
var bootstrapSizes = ["xs", "sm", "md", "lg"];
for (var i = 0; i < bootstrapSizes.length; i++) {
$("<div />", {
class: 'device-' + bootstrapSizes[i] + ' visible-' + bootstrapSizes[i] + '-block'
}).appendTo("body");
}

下面是另一种检测当前视口 没有的方法，它将视口大小数字放入 javascript 中。

请参见 css 和 javascript 代码片段: https://gist.github.com/steveh80/288a9a8bd4c3de16d799

在将这些代码片段添加到 css 和 javascript 文件之后，您可以像下面这样检测当前视图:

viewport.is('xs') // returns boolean

如果您想检测一个视口范围，请像这样使用它

viewport.isEqualOrGreaterThan('sm') // returns true for sm, md and lg

对于任何使用 淘汰赛的人，我想要一些 敲除.js 可观察性质，它会告诉我什么时候命中断点。我选择使用 Modizr 对 CSS 样式媒体查询的支持，以使数字与引导程序定义相匹配，并获得现代化的兼容性好处。我的淘汰视图模型如下:

var viewModel = function() {
// depends on jquery, Modernizr
var self = this;
self.widthXsOrLess = ko.observable();
self.widthSmOrLess = ko.observable();
self.widthMdOrLess = ko.observable();
var setWindowSizeVars = function() {
self.widthXsOrLess(!Modernizr.mq('(min-width: 768px)'));
self.widthSmOrLess(!Modernizr.mq('(min-width: 992px)'));
self.widthMdOrLess(!Modernizr.mq('(min-width: 1200px)'));
};
$(window).resize(setWindowSizeVars);
setWindowSizeVars();
};