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

Question

有没有办法检测 Bootstrap 4 和 Javascript 使用的视图 port/screen 大小？

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

有人知道另一种方法吗？

Answer 1

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

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

来自这个：

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

Answer 3

None 我们从 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 提供读取宽度的最佳方式。将其转换为 bootstrap 宽度很容易：

function getViewport () {
  // 
  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 5

为什么您觉得需要下载 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');
}

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

How to detect screen size or view port on Bootstrap 4 with Javascript

javascript

viewport

bootstrap-4