JavaScript kullanarak Twitter Bootstrap 3'ün duyarlı kesme noktalarını nasıl tespit edebilirim?

Şu anda , Twitter Bootstrap 3 aşağıdaki duyarlı kesme noktalarına sahiptir: sırasıyla küçük, orta ve büyük cihazları temsil eden 768px, 992px ve 1200px.

JavaScript kullanarak bu kesme noktalarını nasıl tespit edebilirim?

Ekran değiştiğinde tetiklenen tüm ilgili etkinlikler için JavaScript ile dinlemek istiyorum. Ve ekranın küçük, orta veya büyük cihazlar için olup olmadığını tespit edebilmek.

Daha önce yapılmış bir şey var mı? Önerileriniz neler?

Düzenleme: Bu kitaplık artık Bower ve NPM aracılığıyla kullanılabilir. Ayrıntılar için github repo'ya bakın.

GÜNCEL YANIT:

• Canlı örnek: CodePen
• Son sürüm: Github deposu
• Bootstrap'i sevmiyor musunuz? Kontrol edin: Kuruluş demosu ve Özel çerçeve demoları
• Bir sorun mu var? Bir sorun açın

Feragatname: Ben yazarım.

En son sürümü (Responsive Bootstrap Toolkit 2.5.0) kullanarak yapabileceğiniz birkaç şey:

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

2.3.0 sürümünden itibaren, <div>aşağıda belirtilen dört öğeye ihtiyacınız yoktur .

ORİJİNAL CEVAP:

Bunun için büyük bir senaryoya veya kütüphaneye ihtiyacınız olduğunu düşünmüyorum. Bu oldukça basit bir görev.

Aşağıdaki öğeleri hemen önce ekleyin </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>

Bu 4 bölme, o anda etkin olan kesme noktasını kontrol etmenizi sağlar. Kolay bir JS algılaması için aşağıdaki işlevi kullanın:

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

Şimdi belirli bir işlemi yalnızca kullanabileceğiniz en küçük kesme noktasında gerçekleştirmek için:

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

DOM hazır olduktan sonra değişiklikleri tespit etmek de oldukça basittir. Tek ihtiyacınız olan, bunun gibi hafif bir pencere yeniden boyutlandırma dinleyicisidir:

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

Bir kez donatıldıktan sonra, değişiklikleri dinlemeye başlayabilir ve aşağıdaki gibi kesme noktasına özgü işlevleri yürütebilirsiniz:

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

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

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

Özel gereksinimleriniz yoksa bunu yapabilirsiniz:

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
}

Düzenleme: Neden sadece Bootstrap projenize dahil jQuery ile bunu yaparken başka bir js kitaplığı kullanmanız gerektiğini görmüyorum.

Response.js'ye bir göz atın mu? Bu tür şeyler için tasarlandı. Response.band ve Response.resize öğelerini birleştirin.

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

Kesme noktalarını pencere boyutunu ve sabit kodunu kullanabilirsiniz. Açısal Kullanımı:

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

JavaScript kullanarak Twitter Bootstrap 4.1.x'in yanıt veren kesme noktasını algılama

Önyükleme v.4.0.0 (ve son sürüm Bootstrap 4.1.x ) güncellendi tanıtıldı ızgara seçenekleri algılama eski kavram doğrudan (bkz uygulanmayabilir nedenle, geçiş talimatları ):

• Daha ayrıntılı denetim için smaşağıya yeni bir ızgara katmanı eklendi 768px. Biz şimdi sahip xs, sm, md, lg, ve xl;
• xs grid sınıfları, infix gerektirmeyecek şekilde değiştirilmiştir.

Güncelleştirilmiş bir ızgara sınıfı adlarına ve yeni bir ızgara katmanına saygı duyan küçük yardımcı program işlevini yazdım:

/**
 * 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;
};

JavaScript kullanarak Bootstrap v4-beta'nın yanıt veren kesme noktasını algılama

Özyükleme v4-alfa ve özyükleme v4-beta ızgara kesme noktaları üzerinde farklı bir yaklaşım vardı, bu yüzden burada da aynı ulaşmanın eski bir yol:

/**
 * 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;
}

Herhangi bir projeye entegre edilmesi kolay olduğu için yararlı olacağını düşünüyorum. Bootstrap'in kendisinin yerel duyarlı görüntüleme sınıflarını kullanır .

İşte benim kendi basit çözümüm:

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

Response.js ile bu yaklaşımı kullanmak daha iyidir. Crossover'ın yalnızca kesme noktası değiştirildiğinde tetikleneceği her pencerede yeniden boyutlandırma Response.resize tetikleyicileri

Response.create({
    prop : "width",
    breakpoints : [1200, 992, 768, 480, 320, 0]
});

Response.crossover('width', function() {
    if (Response.band(1200)) {
        // 1200+

    } else if (Response.band(992)) {
        // 992+

    } else if (Response.band(768)) {
        // 768+

    } else if (Response.band(480)) {
        //480+

    } else {
        // 0->320

    }
});

Response.ready(function() {
    $(window).trigger('resize');
});

@Oozic'in belirttiği gibi bazı manuel uygulamalarda sorun olmamalıdır.

İşte bir göz atabileceğiniz birkaç kitap:

• Response.js - jQuery eklentisi - html veri özniteliklerini kullanın ve ayrıca bir js api'ye sahiptir.
• enquire.js - enquire.js, CSS medya sorgularına yanıt veren hafif ve saf bir JavaScript kitaplığıdır
• SimpleStateManager - duyarlı web siteleri için bir javascript durum yöneticisi. Hafif olacak şekilde inşa edilmiştir, bağımlılığı yoktur.

Bu kütüphanelerin bootstrap, fondöten vb. Bağımsız çalışacak şekilde tasarlandığını unutmayın. Kendi kesme noktalarınızı yapılandırabilir ve eğlenebilirsiniz.

Aktif kesme noktasını görsel olarak kontrol etmek için bunu bootstrap projenize eklemek isteyebilirsiniz

    <script type='text/javascript'>

        $(document).ready(function () {

            var mode;

            $('<div class="mode-informer label-info" style="z-index:1000;position: fixed;bottom:10px;left:10px">%mode%</div>').appendTo('body');


            var checkMode = function () {

                if ($(window).width() < 768) {
                    return 'xs';
                }
                else if ($(window).width() >= 768 && $(window).width() < 992) {
                    return 'sm';
                }
                else if ($(window).width() >= 992 && $(window).width() < 1200) {
                    return 'md';
                }
                else {
                    return 'lg';
                }
            };

            var compareMode = function () {
                if (mode !== checkMode()) {
                    mode = checkMode();

                    $('.mode-informer').text(mode).animate({
                        bottom: '100'
                    }, 100, function () {
                        $('.mode-informer').animate({bottom: 10}, 100)
                    });
                }
            };

            $(window).on('resize', function () {
                compareMode()
            });

            compareMode();

        });

    </script>

İşte BOOTPLY

Maciej Gurban'ın cevabına dayanarak (bu harika ... eğer isterseniz, lütfen cevabını oylayın). Sorgulamak için bir hizmet oluşturuyorsanız, şu anda etkin olan hizmeti aşağıdaki kurulumla iade edebilirsiniz. Bu, diğer kesme noktası algılama kitaplıklarının tamamen yerini alabilir (bazı olaylara koyarsanız enquire.js gibi). DOM geçişini hızlandırmak için DOM öğelerine bir kimlik eklediğimizi unutmayın.

HTML

<div id="detect-breakpoints">
    <div class="breakpoint device-xs visible-xs"></div>
    <div class="breakpoint device-sm visible-sm"></div>
    <div class="breakpoint device-md visible-md"></div>
    <div class="breakpoint device-lg visible-lg"></div>
</div>

COFFEESCRIPT (AngularJS, ancak bu kolayca dönüştürülebilir)

# this simple service allows us to query for the currently active breakpoint of our responsive app
myModule = angular.module('module').factory 'BreakpointService', ($log) ->

  # alias could be: xs, sm, md, lg or any over breakpoint grid prefix from Bootstrap 3
  isBreakpoint: (alias) ->
    return $('#detect-breakpoints .device-' + alias).is(':visible')

  # returns xs, sm, md, or lg
  getBreakpoint: ->
    currentBreakpoint = undefined
    $visibleElement = $('#detect-breakpoints .breakpoint:visible')
    breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']]
    # note: _. is the lodash library
    _.each breakpointStringsArray, (breakpoint) ->
      if $visibleElement.hasClass(breakpoint[0])
        currentBreakpoint = breakpoint[1]
    return currentBreakpoint

JAVASCRIPT (Açısal JS)

var myModule;

myModule = angular.module('modules').factory('BreakpointService', function($log) {
  return {
    isBreakpoint: function(alias) {
      return $('#detect-breakpoints .device-' + alias).is(':visible');
    },
    getBreakpoint: function() {
      var $visibleElement, breakpointStringsArray, currentBreakpoint;
      currentBreakpoint = void 0;
      $visibleElement = $('#detect-breakpoints .breakpoint:visible');
      breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']];
      _.each(breakpointStringsArray, function(breakpoint) {
        if ($visibleElement.hasClass(breakpoint[0])) {
          currentBreakpoint = breakpoint[1];
        }
      });
      return currentBreakpoint;
    }
  };
});

$ (Document) .width () kullanmak yerine, size bu bilgileri veren bir CSS kuralı ayarlamanız gerekir.

Doğru bir şekilde almak için bir makale yazdım. Buraya bakın: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/

Neden sadece bootstrap kapsayıcı sınıfının geçerli css genişliğini algılamak için jQuery kullanmıyorsunuz?

yani ..

if( parseInt($('#container').css('width')) > 1200 ){
  // do something for desktop screens
}

Birisi tarayıcı penceresini yeniden boyutlandırırsa, düzeninizin "yatağı kirletmesini" önlemek için $ (window) .resize () öğesini de kullanabilirsiniz.

Aşağıdakileri her sayfaya birçok kez eklemek yerine ...

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

Her sayfaya dinamik olarak eklemek için JavaScript kullanın (Bootstrap 3 ile çalışmak için güncellediğimi unutmayın .visible-*-block:

// Make it easy to detect screen sizes
var bootstrapSizes = ["xs", "sm", "md", "lg"];
for (var i = 0; i < bootstrapSizes.length; i++) {
    $("<div />", {
        class: 'device-' + bootstrapSizes[i] + ' visible-' + bootstrapSizes[i] + '-block'
    }).appendTo("body");
}

Yorum yapmak için yeterince itibar puanım yok ama Maciej Gurban'ın ResponsiveToolKit'i kullanmaya çalıştıklarında "tanınmayan" sorun yaşayanlar için Maciej'in aslında araç setinin altından referans aldığını fark edene kadar da bu hatayı alıyordum CodePen'deki sayfa

Bunu yapmaya çalıştım ve aniden işe yaradı! Bu nedenle, ResponsiveToolkit'i kullanın, ancak bağlantılarınızı sayfanın altına yerleştirin:

Neden bir fark yarattığını bilmiyorum ama oluyor.

İşte Mevcut görünümü algılamak için başka bir yoludur olmadan sizin javascript görünümünün boyutu numaralarını koyarak.

Css ve javascript snippet'lerine buradan bakın: https://gist.github.com/steveh80/288a9a8bd4c3de16d799

Bu parçacıkları css ve javascript dosyalarınıza ekledikten sonra, geçerli görünüm penceresini şu şekilde tespit edebilirsiniz:

viewport.is('xs') // returns boolean

Bir görüntü aralığı tespit etmek istiyorsanız, bu şekilde kullanın

viewport.isEqualOrGreaterThan('sm') // returns true for sm, md and lg

Bootstrap'ın .containersınıf için CSS'si şuna benzer:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Bu, güvenme jQuery('.container').css('width')dezavantajları olmadan kesme noktalarını tespit etmek için güvenle güvenebileceğimiz anlamına gelir jQuery(window).width().

Bunun gibi bir fonksiyon yazabiliriz:

function detectBreakpoint() {
    // Let's ensure we have at least 1 container in our pages.
    if (jQuery('.container').length == 0) {
        jQuery('body').append('<div class="container"></div>');
    }

    var cssWidth = jQuery('.container').css('width');

    if (cssWidth === '1170px') return 'lg';
    else if (cssWidth === '970px') return 'md';
    else if (cssWidth === '750px') return 'sm';

    return 'xs';
}

Ve sonra test et

jQuery(document).ready(function() {
    jQuery(window).resize(function() {
        jQuery('p').html('current breakpoint is: ' + detectBreakpoint());
    });

    detectBreakpoint();
});

CSS :beforeve contentözelliğini kullanarak kesme noktası durumunu<span id="breakpoint-js"> böylece JavaScript'in bu verileri işlevinizde kullanmak için bir değişken olarak dönüştürmek için okuması gerekir.

(örneği görmek için snippet'i çalıştırın)

NOT: Tarayıcımın üst köşesinde kırmızı bayrak olarak kullanmak için birkaç CSS satırı ekledim <span>. display:none;Eşyalarınızı herkese açık hale getirmeden önce tekrar değiştirdiğinizden emin olun .

// initialize it with jquery when DOM is ready
$(document).on('ready', function() {
    getBootstrapBreakpoint();
});

// get bootstrap grid breakpoints
var theBreakpoint = 'xs'; // bootstrap336 default = mobile first
function getBootstrapBreakpoint(){
   theBreakpoint = window.getComputedStyle(document.querySelector('#breakpoint-js'),':before').getPropertyValue('content').replace(/['"]+/g, '');
   console.log('bootstrap grid breakpoint = ' + theBreakpoint);
}

#breakpoint-js {
  /* display: none; //comment this while developping. Switch back to display:NONE before commit */
  /* optional red flag layout */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  color: white;
  padding: 5px 10px;
  background-color: red;
  opacity: .7;
  /* end of optional red flag layout */
}
#breakpoint-js:before {
  content: 'xs'; /* default = mobile first */
}
@media screen and (min-width: 768px) {
  #breakpoint-js:before {
    content: 'sm';
  }
}
@media screen and (min-width: 992px) {
  #breakpoint-js:before {
    content: 'md';
  }
}
@media screen and (min-width: 1200px) {
  #breakpoint-js:before {
    content: 'lg';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <span id="breakpoint-js"></span>
  <div class="page-header">
    <h1>Bootstrap grid examples</h1>
    <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
  </div>
</div>

Twitter Bootstrap ekran boyutu algılama için yerel bir jQuery yöntemi yaptım. Burada:

// Screen size ID will be stored in this variable (global var for JS)
var CurrentBootstrapScreenSize = 'unknown';

$(document).ready(function () {

    // <div> objects for all screen sizes required for screen size detection.
    // These <div> is hidden for users eyes.
    var currentScreenSizeDetectorObjects = $('<div>').css({
            'position':'absolute',
            'top':'-200px'
        }).addClass('current-screen-size').append([
            $('<div>').addClass('device-xs visible-xs').html('&nbsp;'),
            $('<div>').addClass('device-sm visible-sm').html('&nbsp;'),
            $('<div>').addClass('device-md visible-md').html('&nbsp;'),
            $('<div>').addClass('device-lg visible-lg').html('&nbsp;')
        ]);

    // Attach <div> objects to <body>
    $('body').prepend(currentScreenSizeDetectorObjects);

    // Core method for detector
    function currentScreenSizeDetectorMethod() {
        $(currentScreenSizeDetectorObjects).find('div').each(function() {
            var className = $(this).attr('class');
            if($(this).is(':visible')) {
                if(String(className).match(/device-xs/)) CurrentBootstrapScreenSize = 'xs';
                else if(String(className).match(/device-sm/)) CurrentBootstrapScreenSize = 'sm';
                else if(String(className).match(/device-md/)) CurrentBootstrapScreenSize = 'md';
                else if(String(className).match(/device-lg/)) CurrentBootstrapScreenSize = 'lg';
                else CurrentBootstrapScreenSize = 'unknown';
            };
        })
        console.log('Current Bootstrap screen size is: '+CurrentBootstrapScreenSize);
        $('.CurrentBootstrapScreenSize').first().html('Bootstrap current screen size: <b>' + CurrentBootstrapScreenSize + '</b>' );
    }

    // Bind screen size and orientation change
    $(window).bind("resize orientationchange", function() {
        // Execute screen detection
        currentScreenSizeDetectorMethod();
    });

    // Execute screen detection on page initialize
    currentScreenSizeDetectorMethod();

});

JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/

Tam ekran örneği olarak JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/

Bununla ilgilenen herkes için, TypeScript ve Observables kullanarak CSS kesme noktalarına dayanan bir kesme noktası algılama yazdım. türleri çıkarırsanız, ES6'yı yapmak çok zor değildir. Örneğimde Sass kullanıyorum, ancak bunu kaldırmak da kolay.

İşte JSFiddle'ım: https://jsfiddle.net/StefanJelner/dorj184g/

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.min.js"></script>
<div id="result"></div>

SCSS:

body::before {
  content: 'xs';
  display: none;

  @media screen and (min-width: 480px) {
    content: 's';
  }

  @media screen and (min-width: 768px) {
    content: 'm';
  }

  @media screen and (min-width: 1024px) {
    content: 'l';
  }

  @media screen and (min-width: 1280px) {
    content: 'xl';
  }
}

typescript:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

class BreakpointChangeService {
    private breakpointChange$: BehaviorSubject<string>;

    constructor(): BehaviorSubject<string> {
        // initialize BehaviorSubject with the current content of the ::before pseudo element
        this.breakpointChange$ = new Rx.BehaviorSubject(this.getBreakpoint());

        // observe the window resize event, throttle it and combine it with the BehaviorSubject
        Rx.Observable
            .fromEvent(window, 'resize')
            .throttleTime(0, Rx.Scheduler.animationFrame)
            .withLatestFrom(this.breakpointChange$)
            .subscribe(this.update.bind(this))
        ;

        return this.breakpointChange$;
    }

    // method to get the content of the ::before pseudo element
    private getBreakpoint(): string {
        // see https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
        return window.getComputedStyle(document.body, ':before').getPropertyValue('content').replace(/[\"\']/g, '');
    }

    private update(_, recent): void {
        var current = this.getBreakpoint();
        if(recent !== current) { this.breakpointChange$.next(current); }
    }
}

// if the breakpoint changes, react on it
var $result = document.getElementById('result');
new BreakpointChangeService().subscribe(breakpoint => {
    $result.innerHTML = Date.now()+': '+breakpoint;
});

Umarım bu birine yardımcı olur.

JQuery ile bootstrap4, basitleştirilmiş çözüm

<div class="device-sm d-sm-none"></div>
<div class="device-md d-md-none"></div>
<div class="device-lg d-lg-none"></div>
<div class="device-xl d-xl-none"></div>
<script>
var size = $('.device-xl').is(':hidden') ? 'xl' : ($('.device-lg').is(':hidden') ? 'lg'
    : ($('.device-md').is(':hidden') ? 'md': ($('.device-sm').is(':hidden') ? 'sm' : 'xs')));
alert(size);
</script>

Bana kullanmak için aşırı karmaşık görünen verilen cevaplardan gerçekten memnun kalmadım, bu yüzden kendi çözümümü yazdım. Ancak, şimdilik bu çalışmak için alt çizgiye / lodash'a dayanmaktadır.

https://github.com/LeShrimp/GridSizeEvents

Bu şekilde kullanabilirsiniz:

GridSizeEvents.addListener(function (newSize, oldSize) {
    // Will output eg. "xs -> sm"
    console.log(oldSize + ' -> ' + newSize);
});

Kesme noktaları 768px, 992px ve 1200px'e sabit olarak kodlandığından, bu Bootstrap 3 için kutudan çıkar. Diğer sürümler için kodu kolayca uyarlayabilirsiniz.

Dahili olarak matchMedia () kullanır ve bu nedenle Bootstrap ile senkronize olan sonuçlar üretmeyi garanti etmelidir.

Belki bazılarınıza yardımcı olacaktır, ancak hangi mevcut Bootstrap v4 kesme noktasını gördüğünüzü tespit etmenize yardımcı olan bir eklenti vardır : https://www.npmjs.com/package/bs-breakpoints

Kullanımı basit (jQuery ile veya jQuery olmadan kullanılabilir):

$(document).ready(function() {
  bsBreakpoints.init()
  console.warn(bsBreakpoint.getCurrentBreakpoint())

  $(window).on('new.bs.breakpoint', function (event) {
    console.warn(event.breakpoint)
  })
})

İşte benim çözümüm (Bootstrap 4):

<div class="alert alert-warning row">
    <div class="col">
        Bootstrap breakpoint is
    </div>
    <div class="col">
        <div class="d-block d-sm-none">
            XS
        </div>
        <div class="d-none d-sm-block d-md-none">
            SM
        </div>
        <div class="d-none d-md-block d-lg-none">
            MD
        </div>
        <div class="d-none d-lg-block d-xl-none">
            MD
        </div>
        <div class="d-none d-xl-block">
            MD
        </div>
    </div>
</div>

Knockout.js kullanan herkes için , kesme noktaları vurulduğunda bana söyleyecek bazı knockout.js gözlemlenebilir özellikleri istedim . Modernizr'ın css tarzı medya sorguları için desteğini kullanmayı seçtim, böylece sayılar bootstrap tanımlarıyla eşleşti ve modernizr'in uyumluluk avantajlarını elde ettim . Nakavt görünüm modelim aşağıdaki gibidir:

var viewModel = function() {
    // depends on jquery, Modernizr
    var self = this;
    self.widthXsOrLess = ko.observable();
    self.widthSmOrLess = ko.observable();
    self.widthMdOrLess = ko.observable();
    var setWindowSizeVars = function() {
        self.widthXsOrLess(!Modernizr.mq('(min-width: 768px)'));
        self.widthSmOrLess(!Modernizr.mq('(min-width: 992px)'));
        self.widthMdOrLess(!Modernizr.mq('(min-width: 1200px)'));
    };
    $(window).resize(setWindowSizeVars);
    setWindowSizeVars();
};

İşte onu tespit etmenin iyi bir yolu (belki komik, ama çalışıyor) ve Kodun net olması için gerekli öğeyi kullanabilirsiniz:

Örnek: css:

@media (max-width: 768px) {
    #someElement
    {
         background: pink
    }
}

ve jQuery tarafından belgede:

if($('#someElement').css('background') == 'pink')
{
    doWhatYouNeed();
}

tabii ki css özelliği herhangi.

Bootstrap 4 yakında çıkacağından, onu destekleyen bir işlevi paylaşacağımı düşündüm (xl artık bir şey) ve işi yapmak için en az jQuery gerçekleştiriyor.

/**
 * Get the Bootstrap device size
 * @returns {string|boolean} xs|sm|md|lg|xl on success, otherwise false if Bootstrap is not working or installed
 */
function findBootstrapEnvironment() {
    var environments = ['xs', 'sm', 'md', 'lg', 'xl'];
    var $el = $('<span />');
    $el.appendTo($('body'));
    for (var i = environments.length - 1; i >= 0; i--) {
        var env = environments[i];
        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return false;
}

Bootstrap 4

setResponsiveDivs();

function setResponsiveDivs() {
    var data = [
        {id: 'visible-xs', class: 'd-block d-sm-none'},
        {id: 'visible-sm', class: 'd-none d-sm-block d-md-none'},
        {id: 'visible-md', class: 'd-none d-md-block d-lg-none'},
        {id: 'visible-lg', class: 'd-none d-lg-block d-xl-none'},
        {id: 'visible-xl', class: 'd-none d-xl-block'}
    ];

    for (var i = 0; i < data.length; i++) {
        var el = document.createElement("div");
        el.setAttribute('id', data[i].id);
        el.setAttribute('class', data[i].class);
        document.getElementsByTagName('body')[0].appendChild(el);
    }
}

function isVisible(type) {
    return window.getComputedStyle(document.getElementById('visible-' + type), null).getPropertyValue('display') === 'block';
}

// then, at some point
window.onresize = function() {
    console.log(isVisible('xs') === true ? 'xs' : '');
    console.log(isVisible('sm') === true ? 'sm' : '');
    console.log(isVisible('md') === true ? 'md' : '');
    console.log(isVisible('lg') === true ? 'lg' : '');
    console.log(isVisible('xl') === true ? 'xl' : '');
};

veya küçültülmüş

function setResponsiveDivs(){for(var e=[{id:"visible-xs","class":"d-block d-sm-none"},{id:"visible-sm","class":"d-none d-sm-block d-md-none"},{id:"visible-md","class":"d-none d-md-block d-lg-none"},{id:"visible-lg","class":"d-none d-lg-block d-xl-none"},{id:"visible-xl","class":"d-none d-xl-block"}],s=0;s<e.length;s++){var l=document.createElement("div");l.setAttribute("id",e[s].id),l.setAttribute("class",e[s]["class"]),document.getElementsByTagName("body")[0].appendChild(l)}}function isVisible(e){return"block"===window.getComputedStyle(document.getElementById("visible-"+e),null).getPropertyValue("display")}setResponsiveDivs();

Eğer kullanırsanız Knockout , o zaman modelinde bir gözlemlenebilir cari görünüm penceresi kesme noktası (xs, sm, md veya lg) bağlamak için bağlama aşağıdaki özel kullanabilirsiniz. Bağlayıcı...

• 4 sarar divsile visible-??kimlikli bir div sınıftadetect-viewport zaten yoksa gövdeye ekler (böylece bu div'leri çoğaltmadan bu bağlamayı yeniden kullanabilirsiniz)
• div öğelerinden hangisinin görünür olduğunu sorgulayarak geçerli görünüm alanı kesme noktasını bağlı olan gözlenebilir değere ayarlar
• pencere yeniden boyutlandırıldığında geçerli görünüm kesme noktası noktasını günceller

ko.bindingHandlers['viewport'] = {
    init: function(element, valueAccessor) {
        if (!document.getElementById('detect-viewport')) {
            let detectViewportWrapper = document.createElement('div');
            detectViewportWrapper.id = 'detect-viewport';
            
            ["xs", "sm", "md", "lg"].forEach(function(breakpoint) {
                let breakpointDiv = document.createElement('div');
                breakpointDiv.className = 'visible-' + breakpoint;
                detectViewportWrapper.appendChild(breakpointDiv);
            });

            document.body.appendChild(detectViewportWrapper);
        }

        let setCurrentBreakpoint = function() {
            valueAccessor()($('#detect-viewport div:visible')[0].className.substring('visible-'.length));
        }
      
        $(window).resize(setCurrentBreakpoint);
        setCurrentBreakpoint();
    }
};

ko.applyBindings({
  currentViewPort: ko.observable()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div data-bind="viewport: currentViewPort"></div>
<div>    
    Current viewport breakpoint: <strong data-bind="text: currentViewPort"></strong>
</div>
<div>
    (Click the <em>full page</em> link of this snippet to test the binding with different window sizes)
</div>

OP'den bu yana bir süre geçti, ancak Bootstrap 3 kullanarak bunun için benim çözümüm. Kullanım durumumda sadece satırları hedefliyordum, ancak aynı şey konteynere vb.

Sadece .row'u ne istersen değiştir.

jQuery(document).ready(function ($) {

    var alterClass = function () {

        var ww = document.body.clientWidth;

        if (ww < 768) {

            $('.row').addClass('is-xs').removeClass('is-sm').removeClass('is-lg').removeClass('is-md');

        } else if (ww >= 768 && ww < 992) {

            $('.row').addClass('is-sm').removeClass('is-xs').removeClass('is-lg').removeClass('is-md');

        } else if (ww >= 992 && ww < 1200) {

            $('.row').addClass('is-md').removeClass('is-xs').removeClass('is-lg').removeClass('is-sm');

        } else if (ww >= 1200) {

            $('.row').addClass('is-lg').removeClass('is-md').removeClass('is-sm').removeClass('is-xs');

        };
    };

    // Make Changes when the window is resized
    $(window).resize(function () {
        alterClass();
    });

    // Fire when the page first loads
    alterClass();
});