目前,TwitterBootstrap 3具有以下响应断点:768px,992px和1200px,分别代表小型,中型和大型设备。
如何使用JavaScript检测这些断点?
我想用JavaScript监听屏幕变化时触发的所有相关事件。并能够检测屏幕是用于小型,中型还是大型设备。
已经做过什么了吗?您有什么建议?
编辑:现在可以通过Bower和NPM使用此库。 有关详细信息,请参见github repo。
您可以使用最新版本(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>下面提到的四个元素。
<div>
原始答案:
我认为您不需要任何庞大的脚本或库。这是一个相当简单的任务。
在下面插入以下元素</body>:
</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()) });