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

Question

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

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

有人知道另一种方法吗？

Answer 1

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

这个 S/O 问题提供了读取宽度的最佳方法。将其转换为引导宽度很容易：

function getViewport () {
  // /sf/answers/621324861/
  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)
}

Answer 2

为什么您觉得需要下载 Bootstrap 工具包？

我多年来一直在使用这种方法：

1) 在 HTML 中，我在</body>标签之前包含：

<div id="sizer">
    <div class="d-block d-sm-none d-md-none d-lg-none d-xl-none" data-size="xs"></div>
    <div class="d-none d-sm-block d-md-none d-lg-none d-xl-none" data-size="sm"></div>
    <div class="d-none d-sm-none d-md-block d-lg-none d-xl-none" data-size="md"></div>
    <div class="d-none d-sm-none d-md-none d-lg-block d-xl-none" data-size="lg"></div>
    <div class="d-none d-sm-none d-md-none d-lg-none d-xl-block" data-size="xl"></div>
</div>

2）我使用这样的Javascript函数：

function viewSize() {
    return $('#sizer').find('div:visible').data('size');
}