Aşağıdaki duyarlı kesme noktaları var Twitter Currently,: 768 px, 992px ve 1200px, küçük, orta ve büyük cihazlar sırasıyla temsil eden.

Nasıl bu kesme noktaları JavaScript kullanarak algılayabilir miyim?

Bütün etkinlikler ekranı değiştiğinde tetiklenen JavaScript ile dinlemek istiyorum. Ve eğer ekran küçük olduğunu tespit edebilmek için, orta veya büyük cihazlar.

Şimdiden bir şey var mı? Önerileriniz nelerdir?

GÜNCELLEME CEVAP:

• Canlı örnek: CodePen
• En son sürüm: Github repository
• Bootstrap gibi değil mi? Kontrol edin: Foundation demo Custom framework gösteriler
• Bir sorun var mı? Open an issue

Yasal Uyarı: Ben yazar değilim.

İşte en son sürümü (Duyarlı Bootstrap Toolkit 2.5.0) kullanarak yapabileceğiniz birkaç şey vardır:

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

Sürüm 2.3.0 olarak, <div> dört element aşağıda belirtilen ihtiyacın yok.

ORİJİNAL CEVABI:

Bunun için herhangi bir komut ya da büyük bir kütüphaneye ihtiyacınız olduğunu sanmıyorum. Oldukça basit bir görev.

Sadece </body> önce aşağıdaki öğeleri ekleyin:

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

Bu 4 divs şu anda etkin kesme için kontrol sağlar. Kolay JS bir algılama için aşağıdaki işlevi kullanın:

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

Şimdi kullanabileceğin en küçük kesme sadece belirli bir eylemi gerçekleştirmek için:

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

DOM hazır sonra değişiklikleri saptamak da oldukça basittir. İhtiyacınız olan tek şey bu gibi hafif pencereyi yeniden boyutlandırmak bir dinleyici

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();

İle donatılmış sonra, değişiklikler için dinlemeye başla ve kesme gibi özel fonksiyonları çalıştırabilirsiniz:

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

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

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