目前，Twitter Bootstrap 3 有以下响应断点：768px、992px 和 1200px，分别代表小型、中型和大型设备。
如何使用 JavaScript 检测这些断点？
我想用 JavaScript 监听屏幕变化时触发的所有相关事件。并且能够检测屏幕是用于小型、中型还是大型设备。
有什么事情已经做了吗？你有什么建议？
如何使用 JavaScript 检测 Twitter Bootstrap 3 的响应断点？
IT技术
javascript
twitter-bootstrap-3
dom-events
2021-01-16 20:11:22
6个回答
编辑：这个库现在可以通过 Bower 和 NPM 获得。有关详细信息，请参阅 github 存储库。
更新的答案：
- 现场示例：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 允许您检查当前活动的断点。为了简单的 JS 检测，请使用以下函数：
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())
});
如果您没有特定需求，您可以这样做：
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 库，当你可以使用已经包含在你的 Bootstrap 项目中的 jQuery 来做到这一点时。
使用 JavaScript 检测 Twitter Bootstrap 4.1.x 的响应断点
该引导v.4.0.0（和最新版本的引导4.1.x版）推出的更新网格选项，所以在检测到旧观念可能无法直接被应用（见的迁移说明）：
sm在下方添加了一个新的网格层768px以进行更精细的控制。我们现在有xs,sm,md,lg, 和xl;xs网格类已被修改为不需要中缀。
我编写了尊重更新的网格类名称和新网格层的小型实用程序函数：
/**
* Detect the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://stackoverflow.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;
};
使用 JavaScript 检测 Bootstrap v4-beta 的响应断点
该引导V4-α和引导V4-β对电网断点不同的方法，所以这里的达到相同的传统方式：
/**
* Detect and return the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://stackoverflow.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 本身的本机响应显示类。
你看过 Response.js 吗？它是为这种事情而设计的。结合 Response.band 和 Response.resize。
Response.resize(function() {
if ( Response.band(1200) )
{
// 1200+
}
else if ( Response.band(992) )
{
// 992+
}
else if ( Response.band(768) )
{
// 768+
}
else
{
// 0->768
}
});
您可以使用窗口大小并对断点进行硬编码。使用角度：
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';
}
}
};
});