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

Question

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

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

有人知道另一种方法吗？

Answer 1

看起来我们可以轻松调整Bootstrap工具包以使其与Bootstrap 4兼容，只需按照以下步骤操作：

1. Download the Bootstrap toolkit。
2. 替换以下代码：

       // 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>')
       },

   通过这个：

       // 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

感谢Ander，让我走上正轨！但是我不得不用以下内容替换bootstrap-3-section：

// 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>')
}

Answer 3

从Bootstrap 4.2.x开始，我们没有其他任何答案，但以下工作方式如下：

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

Answer 4

我不太确定为什么所有答案都涉及将一个元素插入到DOM中以检查它是否会被显示？ DOM操作很昂贵，为什么不直接读取视口宽度？

This S/O Question提供了阅读宽度的最佳方式。将其转换为引导程序宽度很容易：

function getViewport () {
  // https://stackoverflow.com/a/8876069
  const width = Math.max(
    document.documentElement.clientWidth,
    window.innerWidth || 0
  )
  if (width <= 576) return 'xs'
  if (width <= 768) return 'sm'
  if (width <= 992) return 'md'
  if (width <= 1200) return 'lg'
  return 'xl'
}

如果您希望每次视口更改时触发某种事件...

$(document).ready(function () {
  let viewport = getViewport()
  let debounce
  $(window).resize(() => {
    debounce = setTimeout(() => {
      const currentViewport = getViewport()
      if (currentViewport !== viewport) {
        viewport = currentViewport
        $(window).trigger('newViewport', viewport)
      }
    }, 500)
  })
  $(window).on('newViewport', (viewport) => {
    // do something with viewport
  })
  // run when page loads
  $(window).trigger('newViewport', viewport)
}