web-dev-qa-db-fra.com

Comment détecter les points d'arrêt réactifs de Twitter Bootstrap 3 à l'aide de JavaScript?

Actuellement , Twitter Bootstrap 3 possède les points d'arrêt réactifs suivants: 768px, 992px et 1200px, représentant respectivement les petits, moyens et grands appareils.

Comment détecter ces points d'arrêt à l'aide de JavaScript?

J'aimerais écouter avec JavaScript tous les événements liés déclenchés lorsque l'écran change. Et pour pouvoir détecter si l'écran est destiné à de petits, moyens ou grands appareils.

Y a-t-il déjà quelque chose de fait? Quelles sont vos suggestions?

javascriptjavascript-eventstwitter-bootstrap-3
132
Rubens Mariuzzo

Edit: cette bibliothèque est maintenant disponible via Bower et NPM. Voir github repo pour plus de détails.

RÉPONSE MISE À JOUR:

Disclaimer: je suis l'auteur.

Voici quelques choses que vous pouvez faire avec la dernière version (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);

Depuis la version 2.3.0, vous n'avez plus besoin des quatre éléments <div> mentionnés ci-dessous.

RÉPONSE ORIGINALE:

Je ne pense pas que vous ayez besoin d'un script ou d'une bibliothèque énorme pour cela. C'est une tâche assez simple. 

Insérez les éléments suivants juste avant </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>

Ces 4 divs vous permettent de vérifier le point d'arrêt actuellement actif. Pour une détection facile de JS, utilisez la fonction suivante:

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

Maintenant, pour effectuer une certaine action uniquement sur le plus petit point d'arrêt que vous pouvez utiliser:

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

La détection des modifications après la préparation du DOM est également assez simple. Tout ce dont vous avez besoin est un écouteur de redimensionnement de fenêtre léger comme celui-ci:

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

Une fois que vous en êtes équipé, vous pouvez commencer à écouter les modifications et exécuter des fonctions spécifiques aux points d'arrêt, comme suit:

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

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

    }, 300, fullDateString.getTime())
});
232
Maciej Gurban

Si vous n'avez pas de besoins spécifiques, vous pouvez simplement faire ceci:

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
}

Edit: Je ne vois pas pourquoi vous devriez utiliser une autre bibliothèque js alors que vous pouvez le faire avec jQuery déjà inclus dans votre projet Bootstrap.

57
mtt

Avez-vous jeté un coup d'œil à Response.js? C'est conçu pour ce genre de chose. Combinez Response.band et 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
    }
});
11
DaMouse404

Vous pouvez utiliser la taille de la fenêtre et coder en dur les points d'arrêt. Utilisation angulaire:

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

Détecter le point d'arrêt réactif de Twitter Bootstrap 4.1.x à l'aide de JavaScript

La Bootstrap v.4.0.0 (et la dernière version Bootstrap 4.1.x) a introduit la version mise à jour options de la grille } de sorte que l'ancien concept de détection peut ne pas être appliqué directement les instructions de migration ): 

  • Ajout d'un nouveau niveau de grille sm sous 768px pour un contrôle plus granulaire. Nous avons maintenant xs, sm, md, lg et xl;
  • Les classes de grille xs ont été modifiées pour ne pas nécessiter d'infixe.

J'ai écrit la petite fonction utilitaire qui respecte les noms de classe de grille mis à jour et un nouveau niveau de grille:

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

Détecter le point d'arrêt réactif de Bootstrap v4-beta à l'aide de JavaScript

Bootstrap v4-alpha et Bootstrap v4-beta avaient une approche différente sur les points d'arrêt de la grille. Voici donc la méthode traditionnelle permettant d'atteindre le même résultat: 

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

Je pense que ce serait utile, car il est facile à intégrer à tout projet. Il utilise le classes d'affichage réactif natif du Bootstrap lui-même.

8
Farside

Voici ma propre solution simple:

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

Utiliser cette approche avec Response.js est préférable. Response.resize déclenche à chaque redimensionnement de la fenêtre où la transition est déclenchée uniquement si le point d'arrêt est modifié

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

Il ne devrait y avoir aucun problème avec une implémentation manuelle comme celle mentionnée par @oozic.

Voici quelques bibliothèques que vous pouvez consulter:

  • Response.js - plugin jQuery - utilise les attributs de données html et possède également une API js.
  • enquire.js - enquire.js est une bibliothèque JavaScript pure et légère permettant de répondre aux requêtes de médias CSS.
  • SimpleStateManager - est un gestionnaire d'état javascript pour les sites Web réactifs. Il est construit pour être léger, n'a pas de dépendances.

Notez que ces bibliothèques sont conçues pour fonctionner indépendamment du bootstrap, de la fondation, etc. Vous pouvez configurer vos propres points d'arrêt et vous amuser.

4
Matias

S'appuyant sur la réponse de Maciej Gurban (ce qui est fantastique ... si vous aimez cela, votez s'il vous plaît jusqu'à sa réponse). Si vous créez un service à interroger, vous pouvez renvoyer le service actuellement actif avec la configuration ci-dessous. Cela pourrait remplacer entièrement d'autres bibliothèques de détection de points d'arrêt (comme enquire.js si vous insérez certains événements). Notez que j'ai ajouté un conteneur avec un ID aux éléments DOM pour accélérer la traversée du 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, mais cela est facilement convertible)

# 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;
    }
  };
});
4
Stone

Vous voudrez peut-être ajouter ceci à votre projet d'amorçage pour vérifier visuellement les points d'arrêt actifs

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

Voici le BOOTPLY

4
effe

Pourquoi ne pas simplement utiliser jQuery pour détecter la largeur css actuelle de la classe de conteneur d'amorçage? 

c'est à dire.. 

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

Vous pouvez également utiliser $ (window) .resize () pour empêcher votre mise en page de "salir le lit" si quelqu'un redimensionne la fenêtre du navigateur.

3
Mark Williams

Au lieu d'insérer plusieurs fois ci-dessous dans chaque page ...

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

Il suffit d’utiliser JavaScript pour l’insérer de manière dynamique dans chaque page (notez que je l’ai mis à jour pour fonctionner avec Bootstrap 3 avec .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");
}
3
Phillip Quinlan

Au lieu d'utiliser $ (document) .width (), vous devez définir une règle CSS qui vous donne ces informations.

Je viens d'écrire un article pour l'obtenir avec précision. Voir ici: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/

3
xurei

Utilisez les propriétés CSS :before et content pour imprimer l'état du point d'arrêt dans le <span id="breakpoint-js">. Il suffit donc à JavaScript de lire ces données pour les transformer en variable à utiliser dans votre fonction.

(lancez l'extrait pour voir l'exemple)

NOTE: J'ai ajouté quelques lignes de CSS pour utiliser le <span> en tant que drapeau rouge dans le coin supérieur de mon navigateur. Assurez-vous simplement de le redéfinir sur display:none; avant de publier vos données. 

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

2
MartinDubeNet

Voici un autre moyen de détecter la fenêtre en cours sans en mettant les numéros de taille de la fenêtre dans votre javascript.

Voir les extraits css et javascript ici: https://Gist.github.com/steveh80/288a9a8bd4c3de16d799

Après avoir ajouté ces extraits à vos fichiers css et javascript, vous pouvez détecter la fenêtre d'affichage actuelle comme ceci:

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

Si vous voulez détecter une plage de vues, utilisez-la comme ceci

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

Je n'ai pas assez de points de réputation à commenter, mais pour ceux qui ont du mal à se faire "méconnaître" en essayant d'utiliser ResponsiveToolKit de Maciej Gurban, j'ai aussi eu cette erreur jusqu'à ce que je remarque que Maciej fait référence à la boîte à outils depuis le bas page dans son CodePen 

J'ai essayé de faire ça et ça a fonctionné! Donc, utilisez le ResponsiveToolkit mais placez vos liens au bas de la page: 

Je ne sais pas pourquoi cela fait une différence mais c'est le cas. 

2
Michael Ackary

Le code CSS de Bootstrap pour la classe .container ressemble à ceci:

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

Cela signifie donc que nous pouvons compter en toute sécurité sur jQuery('.container').css('width') pour détecter les points d'arrêt sans les inconvénients de s'appuyer sur jQuery(window).width().

Nous pouvons écrire une fonction comme celle-ci:

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

Et puis testez comme

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

    detectBreakpoint();
});
2
FlavioEscobar

Pour tous ceux qui s'intéressent à cela, j’ai écrit une détection de point d’arrêt basée sur des points d’arrêt CSS avec TypeScript et Observables. il n’est pas très difficile d’en faire une ES6, si vous supprimez les types. Dans mon exemple, j'utilise Sass, mais il est également facile de le supprimer.

Voici mon JSFiddle: 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';
  }
}

Manuscrit:

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

J'espère que cela aide quelqu'un.

1
Stefan Jelner

J'ai créé une méthode jQuery native pour la détection de la taille de l'écran de Twitter Bootstrap. Voici:

// 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 en exemple plein écran: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/

1
Piotr Stępniewski

Bootstrap4 avec jQuery, solution simplifiée 

<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>
1
Alex R

Cela aidera peut-être certains d'entre vous, mais il existe un plugin qui vous aide à détecter le point d'arrêt actuel de Bootstrap v4: https://www.npmjs.com/package/bs-breakpoints

Simple à utiliser (peut être utilisé avec ou sans jQuery):

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

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

Je n’étais pas vraiment satisfait des réponses données, qui me paraissent trop compliquées à utiliser, j’ai donc écrit ma propre solution. Cependant, pour le moment, cela dépend du soulignement/lodash.

https://github.com/LeShrimp/GridSizeEvents

Vous pouvez l'utiliser comme ceci:

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

Cela fonctionne hors de la boîte pour Bootstrap 3, car les points d'arrêt sont codés en dur à 768px, 992px et 1200px. Pour les autres versions, vous pouvez facilement adapter le code.

En interne, cela utilise matchMedia () et devrait donc garantir de produire des résultats synchronisés avec Bootstrap.

1
MaximeW

Pour ceux qui utilisent knockout.js, je voulais des propriétés observables knockout.js qui me diraient quand les points d'arrêt sont atteints. J'ai choisi d'utiliser le support de Modernizr pour les requêtes de média de style css afin que les chiffres correspondent aux définitions de bootstrap et pour obtenir les avantages de la compatibilité de modernizr. Mon modèle d'affichage masqué est le suivant:

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

Voici un bon moyen de le détecter (peut-être amusant, mais ça marche) et vous pouvez utiliser l'élément nécessaire pour que le code soit clair

Exemple: Css:

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

et dans le document de jQuery:

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

bien sûr, la propriété css est quelconque.

0
Świeżu

Si vous utilisez Knockout , vous pouvez utiliser la liaison personnalisée suivante pour lier le point d'arrêt de la fenêtre d'affichage actuelle (xs, sm, md ou lg) à un observable de votre modèle. La reliure ...

  • encapsule la classe 4 divs avec visible-?? dans un div portant l'ID detect-viewport et l'ajoute au corps si elle n'existe pas déjà (vous pouvez donc réutiliser cette liaison sans dupliquer ces divs)
  • définit le point d'arrêt de la fenêtre en cours sur l'observable lié en demandant quel div est visible
  • met à jour le point d'arrêt de la fenêtre en cours lorsque la fenêtre est redimensionnée

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>

0
Philip Bijker

Comme bootstrap 4 sera bientôt disponible, je pensais partager une fonction qui le prend en charge (xl est maintenant chose courante) et effectuer un minimum de jQuery pour que le travail soit effectué.

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

Cela fait longtemps que l’opérateur n’existe pas, mais voici ma solution à l’aide de Bootstrap 3. Dans mon cas d’utilisation, je ne ciblais que les lignes, mais la même chose pouvait être appliquée au conteneur, etc.

Il suffit de changer .row pour ce que vous voulez.

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