Bagaimana cara mendeteksi breakpoint responsif Twitter Bootstrap 3 menggunakan JavaScript?

Saat ini , Twitter Bootstrap 3 memiliki breakpoint responsif berikut: 768px, 992px, dan 1200px, masing-masing mewakili perangkat kecil, sedang, dan besar.

Bagaimana saya bisa mendeteksi breakpoint ini menggunakan JavaScript?

Saya ingin mendengarkan JavaScript untuk semua acara terkait yang dipicu saat layar berubah. Dan untuk dapat mendeteksi apakah layar untuk perangkat kecil, menengah atau besar.

Apakah sudah ada yang dilakukan? Apa saran Anda?

Sunting: Perpustakaan ini sekarang tersedia melalui Bower dan NPM. Lihat github repo untuk detailnya.

JAWABAN TERBARU:

• Contoh langsung: CodePen
• Versi terbaru: repositori Github
• Tidak suka Bootstrap? Periksa: Demo fondasi dan demo kerangka kerja Kustom
• Mempunyai masalah? Buka masalah

Penafian: Saya penulis.

Berikut adalah beberapa hal yang dapat Anda lakukan menggunakan versi terbaru (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);

Pada versi 2.3.0, Anda tidak memerlukan empat <div>elemen yang disebutkan di bawah ini.

JAWABAN ASLI:

Saya tidak berpikir Anda memerlukan skrip atau perpustakaan besar untuk itu. Ini tugas yang cukup sederhana.

Masukkan elemen berikut sebelum </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>

Keempat div ini memungkinkan Anda memeriksa breakpoint yang sedang aktif. Untuk deteksi JS yang mudah, gunakan fungsi berikut:

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

Sekarang untuk melakukan tindakan tertentu hanya pada breakpoint terkecil yang dapat Anda gunakan:

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

Mendeteksi perubahan setelah DOM siap juga cukup sederhana. Yang Anda butuhkan hanyalah pendengar ukuran jendela yang ringan seperti ini:

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

Setelah dilengkapi, Anda dapat mulai mendengarkan perubahan dan menjalankan fungsi khusus breakpoint seperti:

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

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

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

Jika Anda tidak memiliki kebutuhan khusus, Anda bisa melakukan ini:

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
}

Sunting: Saya tidak melihat mengapa Anda harus menggunakan perpustakaan js lain ketika Anda bisa melakukan ini hanya dengan jQuery yang sudah termasuk dalam proyek Bootstrap Anda.

Sudahkah Anda melihat Response.js? Ini dirancang untuk hal semacam ini. Gabungkan Response.band dan 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
    }
});

Anda bisa menggunakan ukuran jendela dan kode keras breakpoints. Menggunakan Angular:

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

Mendeteksi breakpoint responsif dari Twitter Bootstrap 4.1.x menggunakan JavaScript

The Bootstrap v.4.0.0 (dan versi terbaru Bootstrap 4.1.x ) memperkenalkan diperbarui pilihan jaringan , sehingga konsep lama deteksi mungkin tidak langsung diterapkan (lihat petunjuk migrasi ):

• Menambahkan smtier kisi baru di bawah ini 768pxuntuk kontrol yang lebih terperinci. Kami sekarang memiliki xs, sm, md, lg, dan xl;
• xs kelas kisi telah dimodifikasi agar tidak memerlukan infiks.

Saya menulis fungsi utilitas kecil yang menghormati nama kelas grid yang diperbarui dan tingkat grid baru:

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

Mendeteksi breakpoint responsif dari Bootstrap v4-beta menggunakan JavaScript

The Bootstrap v4-alpha dan Bootstrap v4-beta memiliki pendekatan yang berbeda pada breakpoints grid, jadi inilah cara warisan mencapai hal yang 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;
}

Saya pikir ini akan berguna, karena mudah diintegrasikan ke proyek apa pun. Ia menggunakan kelas tampilan asli responsif dari Bootstrap itu sendiri.

Di sini solusi sederhana saya sendiri:

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

Menggunakan pendekatan ini dengan Response.js lebih baik. Respons.resize pemicu pada setiap ukuran jendela di mana crossover hanya akan dipicu jika breakpoint diubah

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

Seharusnya tidak ada masalah dengan beberapa implementasi manual seperti yang disebutkan oleh @oozic.

Berikut adalah beberapa lib yang bisa Anda lihat:

• Response.js - plugin jQuery - memanfaatkan atribut data html dan juga memiliki js api.
• enquire.js - enquire.js adalah pustaka JavaScript yang ringan dan murni untuk menanggapi pertanyaan media CSS
• SimpleStateManager - manajer negara javascript untuk situs web responsif. Dibangun menjadi ringan, tidak memiliki ketergantungan.

Perhatikan bahwa lib ini dirancang untuk bekerja secara independen dari bootstrap, fondasi, dll. Anda dapat mengonfigurasi breakpoint Anda sendiri dan bersenang-senang.

Anda mungkin ingin menambahkan ini ke proyek bootstrap Anda untuk memeriksa breakpoint aktif secara visual

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

Inilah BOOTPLY

Membangun jawaban Maciej Gurban (yang fantastis ... jika Anda suka ini, silakan pilih suara jawabannya). Jika Anda membangun layanan untuk meminta Anda dapat mengembalikan layanan yang sedang aktif dengan pengaturan di bawah ini. Ini bisa menggantikan pustaka deteksi breakpoint lainnya sepenuhnya (seperti enquire.js jika Anda memasukkan beberapa peristiwa). Perhatikan bahwa saya telah menambahkan wadah dengan ID ke elemen DOM untuk mempercepat traversal DOM.

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, tapi ini mudah dikonversi)

# 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 (AngularJS)

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

Alih-alih menggunakan $ (dokumen) .width (), Anda harus menetapkan aturan CSS yang memberi Anda informasi ini.

Saya baru saja menulis artikel untuk mendapatkannya secara akurat. Lihat di sini: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/

Mengapa tidak menggunakan jQuery untuk mendeteksi lebar css saat ini dari kelas wadah bootstrap?

yaitu..

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

Anda juga dapat menggunakan $ (window) .resize () untuk mencegah tata letak Anda dari "mengotori tempat tidur" jika seseorang mengubah ukuran jendela browser.

Alih-alih memasukkan berkali-kali di bawah ini ke setiap halaman ...

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

Cukup gunakan JavaScript untuk memasukkannya secara dinamis ke setiap halaman (perhatikan bahwa saya telah memperbaruinya agar berfungsi dengan Bootstrap 3 dengan .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");
}

Saya tidak memiliki poin reputasi yang cukup untuk dikomentari tetapi bagi mereka yang memiliki masalah dengan "tidak dikenal" ketika mereka mencoba menggunakan ResponsiveToolKit Maciej Gurban, saya juga mendapatkan kesalahan itu sampai saya perhatikan bahwa Maciej benar-benar merujuk toolkit dari bawah. halaman di CodePen-nya

Saya mencoba melakukan itu dan tiba-tiba itu berhasil! Jadi, gunakan ResponsiveToolkit tetapi letakkan tautan Anda di bagian bawah halaman:

Saya tidak tahu mengapa itu membuat perbedaan tetapi itu terjadi.

Berikut adalah cara lain untuk mendeteksi viewport saat ini tanpa memasukkan nomor ukuran viewport di javascript Anda.

Lihat cuplikan css dan javascript di sini: https://gist.github.com/steveh80/288a9a8bd4c3de16d799

Setelah menambahkan cuplikan itu ke file css dan javascript Anda, Anda dapat mendeteksi viewport saat ini seperti ini:

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

Jika Anda ingin mendeteksi rentang viewport, gunakan seperti ini

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

CSS Bootstrap untuk .containerkelas terlihat seperti itu:

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

Jadi ini berarti kita dapat dengan aman mengandalkan jQuery('.container').css('width')untuk mendeteksi breakpoint tanpa kekurangan mengandalkannya jQuery(window).width().

Kita dapat menulis fungsi seperti ini:

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

Dan kemudian mengujinya seperti

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

    detectBreakpoint();
});

Gunakan CSS :beforedan contentproperti untuk mencetak keadaan breakpoint di <span id="breakpoint-js">JavaScript sehingga hanya perlu membaca data ini untuk mengubahnya sebagai variabel untuk digunakan dalam fungsi Anda.

(jalankan cuplikan untuk melihat contoh)

CATATAN: Saya menambahkan beberapa baris CSS untuk menggunakan <span>sebagai bendera merah di sudut atas browser saya. Pastikan untuk mengubahnya kembali display:none;sebelum mendorong barang Anda ke publik.

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

Saya telah membuat metode jQuery asli untuk deteksi ukuran layar Bootstrap Twitter. Disini adalah:

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

JSFillde sebagai contoh layar penuh: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/

Bagi siapa pun yang tertarik dengan ini, saya menulis deteksi breakpoint berdasarkan breakpoint CSS menggunakan TypeScript dan Observables. tidak terlalu sulit untuk membuat ES6 darinya, jika Anda menghapus tipenya. Dalam contoh saya saya menggunakan Sass, tetapi juga mudah untuk menghapus ini.

Ini JSFiddle saya: 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;
});

Saya harap ini membantu seseorang.

Bootstrap4 dengan jQuery, solusi sederhana

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

Saya tidak benar-benar puas dengan jawaban yang diberikan, yang tampaknya terlalu rumit untuk digunakan kepada saya, jadi saya menulis solusi sendiri. Namun, untuk saat ini bergantung pada garis bawah / lodash untuk bekerja.

https://github.com/LeShrimp/GridSizeEvents

Anda bisa menggunakannya seperti ini:

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

Ini berfungsi di luar Kotak untuk Bootstrap 3, karena breakpoints dikodekan ke 768px, 992px dan 1200px. Untuk versi lain, Anda dapat dengan mudah mengadaptasi kode.

Secara internal ini menggunakan matchMedia () dan karenanya harus menjamin untuk menghasilkan hasil yang selaras dengan Bootstrap.

Mungkin itu akan membantu sebagian dari Anda, tetapi ada sebuah plugin yang membantu Anda untuk mendeteksi breakpoint Bootstrap v4 saat ini yang Anda lihat: https://www.npmjs.com/package/bs-breakpoints

Mudah digunakan (dapat digunakan dengan atau tanpa jQuery):

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

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

Inilah solusi saya (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>

Bagi siapa pun yang menggunakan knockout.js , saya ingin beberapa properti yang bisa diamati knockout.js yang akan memberi tahu saya ketika breakpoints terkena. Saya memilih untuk menggunakan dukungan Modernizr untuk kueri media gaya css sehingga jumlahnya cocok dengan definisi bootstrap, dan untuk mendapatkan manfaat kompatibilitas modernizr. Model tampilan KO saya adalah sebagai berikut:

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

Berikut adalah cara yang baik untuk mendeteksinya (mungkin lucu, tetapi berfungsi) dan Anda dapat menggunakan elemen yang diperlukan sehingga kode menjadi jelas:

Contoh: css:

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

dan dalam dokumen oleh jQuery:

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

Tentu saja properti css ada.

Karena bootstrap 4 akan segera keluar saya pikir saya akan berbagi fungsi yang mendukungnya (xl sekarang menjadi hal) dan melakukan jQuery minimal untuk menyelesaikan pekerjaan.

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

atau diperkecil

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

Jika Anda menggunakan Knockout , maka Anda dapat menggunakan pengikatan kustom berikut untuk mengikat breakpoint viewport saat ini (xs, sm, md atau lg) ke yang dapat diamati dalam model Anda. Yang mengikat ...

• membungkus 4 divsdengan visible-??kelas dalam div dengan id detect-viewportdan menambahkannya ke tubuh jika belum ada (sehingga Anda dapat menggunakan kembali ikatan ini tanpa menduplikasi div ini)
• menyetel breakpoint viewport saat ini ke terikat yang dapat diamati dengan menanyakan mana div yang terlihat
• memperbarui breakpoint viewport saat ini ketika jendela diubah ukurannya

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>

Sudah lama sejak OP, tapi inilah solusi saya untuk ini menggunakan Bootstrap 3. Dalam kasus penggunaan saya, saya hanya menargetkan baris, tetapi hal yang sama dapat diterapkan pada wadah, dll.

Ubah saja. Pindahkan ke apa pun yang Anda inginkan.

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