如何使用Javascript检测屏幕大小或在Bootstrap 4上查看端口

Question

有没有办法检测Bootstrap 4使用Javascript使用的视图端口/屏幕大小？

当用户调整浏览器大小时，我无法找到可靠的方法来检测当前视图端口。我试过Bootstrap toolkit，但它似乎与Bootstrap 4不兼容。

有人知道另一种方法吗？

Answer 1

看起来我们可以很容易地调整的引导工具，使其与引导4兼容的，只要按照下列步骤操作：

1. Download the Bootstrap toolkit。通过这一个

   // Bootstrap 3 
       bootstrap: { 
        'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>'), 
        'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>'), 
        'md': $('<div class="device-md visible-md visible-md-block"></div>'), 
        'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>') 
       }, 
   

   ：

2. 将以下代码

   // Bootstrap 4 
       bootstrap: { 
        'xs': $('<div class="device-xs hidden-sm-up">xs</div>'), 
        'sm': $('<div class="device-sm hidden-xs-down hidden-md-up">sm</div>'), 
        'md': $('<div class="device-md hidden-sm-down hidden-lg-up">md</div>'),  
        'lg': $('<div class="device-lg hidden-xl-up hidden-md-down">lg</div>'), 
        'xl': $('<div class="device-lg hidden-lg-down">xl</div>') 
       } 
   

然后你可以使用该工具包通常以检测屏幕尺寸：

// Wrap IIFE around your code 
(function($, viewport){ 
    $(document).ready(function() { 

     // 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 code each time window size changes 
     $(window).resize(
      viewport.changed(function() { 
       if(viewport.is('xs')) { 
        // ... 
       } 
      }) 
     ); 
    }); 
})(jQuery, ResponsiveBootstrapToolkit); 

Answer 2

谢谢安德，让我走上正轨！不过，我必须用以下代码来替换bootstrap-3部分：

// Bootstrap 4 
bootstrap: { 
    'xs': $('<div class="device-xs d-block d-sm-none" ></div>'), 
    'sm': $('<div class="device-sm d-none d-sm-block d-md-none"></div>'), 
    'md': $('<div class="device-md d-none d-sm-none d-md-block d-lg-none"></div>'), 
    'lg': $('<div class="device-lg d-none d-sm-none d-md-none d-lg-block d-xl-none"></div>'), 
    'xl': $('<div class="device-lg d-none d-sm-none d-md-none d-lg-none d-xl-block"></div>') 
}