Twitter Bootstrap - 如何檢測媒體查詢何時開始

Question

當 bootstrap-responsive.css 媒體查詢開始運行時，哪個是最快和最簡單的觸發方式？

開始行動 = 當您將窗口大小調整為移動設備寬度並且站點更改為響應式移動設備時

希望問題很清楚

Answer 1

我想出了一種使用窗口大小調整事件的方法，但依靠 Twitter Bootstrap 的媒體查詢而不對其斷點進行硬編碼：

<span id="mq-detector">
    <span class="visible-xs"></span>
    <span class="visible-sm"></span>
    <span class="visible-md"></span>
    <span class="visible-lg"></span>
</span>

---

#mq-detector {
    visibility: hidden;
}

---

var currMqIdx = undefined;
var mqDetector = $("#mq-detector");
var mqSelectors = [
    mqDetector.find(".visible-xs"),
    mqDetector.find(".visible-sm"),
    mqDetector.find(".visible-md"),
    mqDetector.find(".visible-lg")
];

var checkForResize = function() {
    for (var i = 0; i <= mqSelectors.length; i++) {
        if (mqSelectors[i].is(":visible")) {
            if (currMqIdx != i) {
                currMqIdx = i;
                console.log(mqSelectors[i].attr("class"));
            }
            break;
        }
    }
};

$(window).on('resize', checkForResize);

checkForResize();

Answer 2

其他答案的一個問題是每次調整大小都會觸發更改事件。 如果您的 javascript 正在做一些重要的事情，這可能會非常昂貴。

當超過閾值時，下面的代碼僅調用一次更新函數。

要進行測試，請抓住您的窗口大小句柄，然后快速拖動調整大小以查看瀏覽器是否卡住。

<script>
// Global state variable
var winSize = '';

window.onresize = function () {
    var newWinSize = 'xs'; // default value, check for actual size
    if ($(this).width() >= 1200) {
        newWinSize = 'lg';
    } else if ($(this).width() >= 992) {
        newWinSize = 'md';
    } else if ($(this).width() >= 768) {
        newWinSize = 'sm';
    }

    if( newWinSize != winSize ) {
        doSomethingOnSizeChange();
        winSize = newWinSize;
    }
};
</script>

Answer 3

使用 jquery 你可以找到當前窗口的大小，然后相應地做你的事情。

$(window).resize(function() {
  if ($(this).width() >= 1280) {
    //do something
  }
  else if ($(this).width() < 1280 && $(this).width()>= 980) {
    //do something
  }
  ...
});

CSS:: Twitter-Bootsrap-layouts

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Answer 4

這與 Bootstrap 3 結合對我有用：

<div id="media-width-detection-element"></div>
<style type="text/css">
    #media-width-detection-element {
        display: none;
        width: 0px;
    }
    @media (min-width: 768px) {
        #media-width-detection-element {
            width: 768px;
        }
    }
    @media (min-width: 992px) {
        #media-width-detection-element {
            width: 992px;
        }
    }
    @media (min-width: 1200px) {
        #media-width-detection-element {
            width: 1200px;
        }
    }
</style>
<script type="text/javascript">
    //<![CDATA[
    function xs() {
        return $("#media-width-detection-element").css("width") === "0px";
    }
    function sm() {
        return $("#media-width-detection-element").css("width") === "768px";
    }
    function md() {
        return $("#media-width-detection-element").css("width") === "992px";
    }
    function lg() {
        return $("#media-width-detection-element").css("width") === "1200px";
    }
    //]]>
</script>

隱藏的 DIV 更改寬度取決於實際使用的 CSS min-width 設置。 然后我的 javascript 簡單地檢查當前的 DIV。

Answer 5

很棒的提示，@falsarella！

對於那些喜歡這種事情而不影響他們實際標記的人，以下工作：

$(function(){
...
var mqClasses = ["visible-xs", "visible-sm", "visible-md", "visible-lg"];
var mq = $("<span id='mqDetector' style='visibility:hidden'></span>").appendTo($("body"));
$.each(mqClasses, function(idx, val) {
    mq.append("<span class='" + val + "'></span>");
});
function checkMQ() {
    var visible = mq.find(":visible").get(0).className;
    return visible.slice(-2);
};

function checkResize(){
    switch(checkMQ){
      case 'xs' : ...; break;
      case 'sm' : ...; break;
     ...
    }
}
$(window).on('resize', checkResize);
checkResize(); //do it once when page loads.

Answer 6

此代碼添加正文標簽ld 、 md 、 sd或xd類

     $(function(){

        var device_width_detect = '';

        function device_detec(){
            if ($(this).width() >= 1280) {
                device_width_detect = 'ld';
            }else if ($(this).width() < 1280 && $(this).width()>= 992) {
                device_width_detect = 'md';
            }else if ($(this).width() < 992 && $(this).width()>= 768) {
                device_width_detect = 'sd';
            }else if ($(this).width() < 768) {
                device_width_detect = 'xd';
            }
            $('body').removeClass( "ld md sd xd" ).addClass( device_width_detect );
        }
        device_detec();
        $(window).on('resize', device_detec);

    });

Answer 7

基於@falsarella的解決方案，js部分可以簡化為：

var currMqIdx = undefined;
var checkForResize = function() {    
    currMqIdx = $('#mq-detector span').index($('#mq-detector span:visible'));
};

$(window).on('resize', checkForResize);
checkForResize();

currMqIdx將是一個currMqIdx數值，從 0 到currMqIdx越大，媒體越寬。

Answer 8

更簡單

$(window).on('resize', function () {
  if ($('<div class="visible-lg">').css('display')=='block') {
    // Do something for lg
  }
  // ...
});

Answer 9

我准備了一個超級輕量級​​的庫來處理窗口寬度和 Bootstrap 斷點更改時觸發的事件 - 響應斷點測試器

var viewport = new ResponsiveTester();

$('body').on('in.screen.xs', function(event, devices) {
    // Code executed when viewport is was changed to xs
});

$('body').on('out.screen.xs', function(event, devices) {
    // Code executed when viewport is no longer xs
});

還包括當前斷點檢查等其他功能：

if (viewport.is('xs')) {
    // Executed only on xs breakpoint
}

if (viewport.is('!=xs')) {
    // Executed on all breakpoints that are not equal xs (sm, md, lg)
}

if (viewport.is('<md')) {
    // Executed on breakpoints that are smaller than md (xs, sm)
}

if (viewport.is('<=md')) {
    // Executed on breakpoints that are smaller or equal to md (xs, sm, md)
}

if (viewport.is('>md')) {
    // Executed on breakpoints that are larger than md (lg)
}

支持 Bootstrap 4 和 Foundation 配置，有關GitHub 存儲庫的更多信息

Answer 10

這是我的 bootstrap 4 解決方案，基於@falsarella 的想法

*注意：使用下面的“整頁”選項來測試此代碼段，否則將根據代碼段 iframe 大小返回錯誤的屏幕類型

 /** * @returns STRING current screen type like: xs, sm, md, lg or xl */ function getScreenType() { !function initHelpers() { if ($('div.mq-detector').length !== 0) return; $('body').append(_mqDetector()); // helpers function _mqDetector() { return ` <div class="mq-detector invisible"> <div class="d-block d-sm-none" data-type="xs"></div> <div class="d-none d-sm-block d-md-none" data-type="sm"></div> <div class="d-none d-md-block d-lg-none" data-type="md"></div> <div class="d-none d-lg-block d-xl-none" data-type="lg"></div> <div class="d-none d-xl-block" data-type="xl"></div> </div> `; } }(); // @then return $('div.mq-detector').children().filter(':visible').data('type'); } console.log(getScreenType())

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

Answer 11

改進出色的@falsarella 答案，這是一個適用於 Bootstrap 4 的較短版本：

CSS :

#mq-detector {
    visibility: hidden;
}

HTML :

<div id="mq-detector">
    <span data-mq="xs" class="d-block d-sm-none"></span>
    <span data-mq="sm" class="d-none d-sm-block d-md-none"></span>
    <span data-mq="md" class="d-none d-md-block d-lg-none"></span>
    <span data-mq="lg" class="d-none d-lg-block d-xl-none"></span>
    <span data-mq="xl" class="d-none d-xl-block"></span>
</div>

爪哇腳本：

//Define function that returns the currently used media query
function getBsMq(){
    var currMq;
    var mqDetector = $('#mq-detector [data-mq]');
    mqDetector.each(function(i){
        if ($(this).is(':visible')) {
            currMq = $(this).attr('data-mq');
        }
    });
    return currMq;
}


//Call the function and get the currently used media query
alert(getBsMq());

Answer 12

您可以使用matchMedia和包裝器庫enquire.js ，它注冊媒體查詢並在它們匹配/不匹配時發出事件。

用法

讓我們使用這些 Bootstrap CSS 媒體查詢作為從文檔中獲取的示例。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

要查看何時應用這些規則，請使用enquire.js注冊媒體查詢並提供適當的match和unmatch match函數，如下所示：

let rules = [
    '(max-width: 768px)',  // extra small devices, default
    '(min-width: 768px)',  // small devices
    '(min-width: 992px)',  // medium devices
    '(min-width: 1200px)'  // large devices
];

for (let rule of rules) {
    enquire.register(rule, {
      match: function() {
        console.log(rule + ' matched');
      },      

      unmatch: function() {
        console.log(rule + ' unmatched');
      } 
    });
}

enquire.js使用matchMedia 支持現代瀏覽器的matchMedia ，例如不支持 IE9。 因此，舊版瀏覽器需要使用polyfill來完成這項工作。

演示

Answer 13

我用它只在大屏幕上的引導程序中粘貼https://ducttapedanyol.com上的導航欄：

if ($(this).width() >= 979) { // Detect screen size
$(document).ready(function () {

    var menu = $('.menu');
    var origOffsetY = menu.offset().top;

    function scroll() {
       if ($(window).scrollTop() >= origOffsetY) {
          $('.menu').addClass('sticky');
          $('.fix').addClass('fix-tall');
       } else {
          $('.menu').removeClass('sticky');
          $('.fix').removeClass('fix-tall');
       }


    }

    document.onscroll = scroll;

});
}

Answer 14

我已經修改了代碼此鏈接Bootsrap 4沒有α或β。 代碼如下；

    /* **********************************************************
        Detect bootrap 4 media query type
        https://getbootstrap.com/docs/4.0/utilities/display/
   ********************************************************** */


    $("body").append("<div style='visibilty:hidden' class='viewport-check'><span class='d-block d-sm-none'>xs</span><span class='d-none d-sm-block d-md-none'>sm</span><span class='d-none d-md-block d-lg-none'>md</span><span class='d-none d-lg-block d-xl-none'>lg</span><span class='d-none d-xl-block'>xl</span></div>");

    var Bootstrap4MediaQuery = "";

    //> Checks if the span is set to display block via CSS
    function FnDetectMediaQuery(_QsTarget) {
        var _QsTarget = $(_QsTarget).css('display') == 'block';
        return _QsTarget;
    }

    if(FnDetectMediaQuery('.viewport-check .d-block') == true)
    {
        Bootstrap4MediaQuery = "xs";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-sm-block') == true)
    {
        Bootstrap4MediaQuery = "sm";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-md-block') == true)
    {
        Bootstrap4MediaQuery = "md";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-lg-block') == true)
    {
        Bootstrap4MediaQuery = "lg";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-xl-block') == true)
    {
        Bootstrap4MediaQuery = "xl";
    }
    else
    {
        Bootstrap4MediaQuery = "";
    }

    console.log("Bootstrap4MediaQuery: " + Bootstrap4MediaQuery);

Answer 15

我會使用window.matchMedia和window.addEventListener('resize') 。 下面的示例，特別是函數getActiveBreakpoint()會告訴您哪個斷點處於活動狀態，但也會以輔助類的形式告訴您哪些是lt- （小於那時）和gt- （大於那時），即gt-xs gt-sm md lt-lg lt-xl ，見https://jsfiddle.net/Lqtmc8yo/1/

 /* // from bootstrap/scss/_variables.scss $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; */ const breakpoints = { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, } const orderedKeys = ['xs', 'sm', 'md', 'lg', 'xl'] const getActiveBreakpoint = () => { let breakpoint = '' let classList = [] orderedKeys.some((k, i) => { const n = orderedKeys[i + 1] let query = '' query += `(min-width: ${breakpoints[k]}px)` if (n) { query += `and (max-width: ${breakpoints[n] - 1}px)` } if (window.matchMedia(query).matches) { breakpoint = k classList = [...orderedKeys.slice(0, i).map(b => `gt-${b}`), k, ...orderedKeys.slice(i + 1, orderedKeys.length).map(b => `lt-${b}`)] return true } return false }) return { breakpoint, classList, className: classList.join(' ') } } const calculate = () => { const result = getActiveBreakpoint() document.getElementById('result').innerHTML = ` breakpoint: ${result.breakpoint} <br> className: ${result.className} ` } window.addEventListener('resize', calculate) calculate()

 <div id="result"></div>

Answer 16

當我想在 Bootstrap 4 應用程序中將非引導模塊的類更改為.col-md 時，這已經在Terryfrancis 的stackoverflow 上得到了回答，這在我的 Bootstrap 4 應用程序中仍然很有用。

我同時使用了onload和窗口調整大小功能：

// on load
if ($(window).width() > 575 && $(window).width() < 992) {
   $('div').addClass('col-md-6').removeClass('col-md-4');
} else if ($(window).width() > 992) {
    $('div').addClass('col-md-4').removeClass('col-md-6');
}

// on user resizes browser window
 $( window ).resize(function() {
if ($(window).width() > 575 && $(window).width() < 992) {
   $('div').addClass('col-md-6').removeClass('col-md-4');
} else if (jQuery(window).width() > 992) {
    $('div').addClass('col-md-4').removeClass('col-md-6');
}
});