Kuinka havaita Twitter Bootstrap 3:n responsiiviset katkaisupisteet JavaScriptin avulla?

Tällä hetkellä Twitter Bootstrap 3:lla on seuraavat responsiiviset katkaisupisteet: 768px, 992px ja 1200px, jotka edustavat pienois-, keski- ja suurilaitteita vastaavasti.

Kuinka voin havaita nämä katkaisupisteet JavaScriptin avulla?

Haluaisin kuunnella JavaScriptillä kaikkia siihen liittyviä tapahtumia, jotka laukeavat, kun näyttö muuttuu. Ja pystyä havaitsemaan, onko näyttö pienille, keskikokoisille vai suurille laitteille.

Onko jotain jo tehty? Mitä ehdotuksia sinulla on?

Vastaus #1

Muokkaus: Tämä kirjasto on nyt saatavilla Bowerin ja NPM:n kautta. Katso yksityiskohdat github-reposta.

PÄIVITETTY VASTAUS:

Elävä esimerkki: CodePen
Uusin versio: Github-varasto
Etkö pidä Bootstrapista? Katso: Foundation-demo ja mukautettujen kehysten demot
Onko sinulla ongelma? Avaa ongelma

Vastuuvapauslauseke: Olen kirjoittaja.

Tässä on muutamia asioita, joita voit tehdä käyttämällä uusinta versiota (Responsive Bootstrap Toolkit 2.5.0):

// Wrap everything in an IIFE
(function($, viewport){

    // 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 only after document has fully loaded
    $(document).ready(function() {
        if( viewport.is('xs') ) {
            // ...
        }
    });

    // Execute code each time window size changes
    $(window).resize(
        viewport.changed(function() {
            if( viewport.is('xs') ) {
                // ...
            }
        })
    ); 

})(jQuery, ResponsiveBootstrapToolkit);

Versiosta 2.3.0 lähtien sinun ei tarvitse neljää alla mainittua <div> elementtiä.

ALKUPERÄINEN VASTAUS:

En usko, että tarvitset siihen mitään valtavaa skriptiä tai kirjastoa. Se on melko yksinkertainen tehtävä.

Lisää seuraavat elementit juuri ennen </body>:

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

Nämä 4 diviä antavat sinun tarkistaa nykyisen aktiivisen breakpointin. Helppoa JS-tunnistusta varten käytä seuraavaa funktiota:

function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
}

Nyt tietyn toiminnon suorittamiseksi vain pienimmällä breakpointilla voit käyttää:

if( isBreakpoint('xs') ) {
    $('.someClass').css('property', 'value');
}

Muutosten havaitseminen DOM:n latautumisen jälkeen on myös melko yksinkertaista. Tarvitset vain kevytikkunan koon muutoksen kuuntelijan, kuten tämän:

var waitForFinalEvent = function () {
      var b = {};
      return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d)
      }
    }();

var fullDateString = new Date();

Kun olet varustautunut sillä, voit alkaa kuunnella muutoksia ja suorittaa murtopistekohtaisia toimintoja seuraavasti:

$(window).resize(function () {
    waitForFinalEvent(function(){

        if( isBreakpoint('xs') ) {
            $('.someClass').css('property', 'value');
        }

    }, 300, fullDateString.getTime())
});

Vastaus #2

Jos sinulla ei ole erityistarpeita, voit vain tehdä näin:

if ($(window).width() < 768) {
    // do something for small screens
}
else if ($(window).width() >= 768 &&  $(window).width() <= 992) {
    // do something for medium screens
}
else if ($(window).width() > 992 &&  $(window).width() <= 1200) {
    // do something for big screens
}
else  {
    // do something for huge screens
}

Muokkaus: En näe, miksi sinun pitäisi käyttää toista js-kirjastoa, kun voit tehdä tämän jo pelkällä jQueryllä, joka on mukana Bootstrap-projektissasi.

Vastaus #3

Tässä oma yksinkertainen ratkaisuni:

jQuery :

function getBootstrapBreakpoint(){
    var w = $(document).innerWidth();
    return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}

VanillaJS:

function getBootstrapBreakpoint(){
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}

Vastaus #4

Havaitse Twitter Bootstrap 4.1.x:n responsiivinen murtopiste JavaScriptin avulla

Uusi Bootstrap v.4.0.0 (ja uusin versio Bootstrap 4.1.x) esitteli päivitetyt ruudukkoasetukset, joten vanhaa tunnistusperiaatetta ei ehkä voida soveltaa suoraan (katso siirtymäohjeet):

Lisätty uusi sm-ruudukkoasteikko alle 768px tarkempaan hallintaan. Meillä on nyt xs, sm, md, lg ja xl;
xs-ruudukon luokkia on muokattu niin, että infixiä ei enää tarvita.

Kirjoitin pienen apufunktion, joka kunnioittaa päivitettyjä ruudukon luokkien nimiä ja uutta ruudukon tasoa:

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
        env = Object.keys(envs)[i];
        $el.addClass(envs[env]);
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
};

Havaitse Bootstrap v4-beta:n responsiivinen katkaisupiste JavaScriptin avulla

Bootstrap v4-alpha ja Bootstrap v4-beta käyttivät eri lähestymistapaa ruudukon katkaisupisteisiin, joten tässä on perinteinen tapa saavuttaa sama:

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");;
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
}

Mielestäni se olisi hyödyllistä, sillä sen integroiminen mihin tahansa projektiin on helppoa. Se käyttää Bootstrapin omia natiiveja responsiivisia näyttöluokkia.

Vastaus #5

Voisit käyttää ikkunan kokoa ja kovakoodata katkospisteet. Angularin avulla:

angular
    .module('components.responsiveDetection', [])
    .factory('ResponsiveDetection', function ($window) {
        return {
            getBreakpoint: function () {
                var w = $window.innerWidth;
                if (w < 768) {
                    return 'xs';
                } else if (w < 992) {
                    return 'sm';
                } else if (w < 1200) {
                    return 'md';
                } else {
                    return 'lg';
                }
            }
        };
    });

Vastaus #6

Oletko katsonut Response.js:ää? Se on suunniteltu tällaista varten. Yhdistä Response.band ja Response.resize.

http://responsejs.com/

Response.resize(function() {
    if ( Response.band(1200) )
    {
       // 1200+
    }    
    else if ( Response.band(992) )
    {
        // 992+
    }
    else if ( Response.band(768) )
    {
        // 768+
    }
    else 
    {
        // 0->768
    }
});