如何使用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>') 
}