Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width.
Ressources en ligne
Problème: jQuery $(window).width() et les Media Queries CSS3 ne sont pas toujours très en phase.
Lorsqu’on utilise Firefox, IE ou Opéra pour naviguer sur un site responsive, on peut remarquer au redimensionnement en largeur de la fenêtre un léger décalage dans l’exécution d’une media querie par rapport avec un javascript auxquels on a assigné des break-points similaires.
Cet différence provient d’une inconsistence dans la prise en compte de la présence des scroll-barres verticales par les largeurs déclarées pour les media queries.
Ce bug a pour effet qu’une valeur de largeur identique déclarée dans une media query et par jQuery ne s’exécutera pas tout-à-fait au même moment.
Solution: utiliser jQuery pour détecter un changement sur une propriété CSS plutôt que sur la largeur de la fenêtre du navigateur.
Plutôt que de mesurer la largeur d’écran au redimensionnement de la fenêtre, je vérifie si un changement de règle CSS s’est opéré par le biais d’une media query. De cette façon, sans se préoccuper de la manière dont le navigateur prend en charge la largeur de la scroll-barre verticale, le code jQuery et la media query seront exécutés au même moment.
Supposons que la classe « .sampleClass » possède une règle « float: left; » avant la media query et une règle « float: none; » après. Au redimensionnement de la fenêtre, je vérifie un changement de cette règle.
jQuery
1 2 3 4 5 |
$(window).resize(function(){ if ($(".sampleClass").css("float") == "none" ){ // your code here } }); |
Ou (versions les plus récentes de jQuery 1.x) :
1 2 3 4 5 |
$(window).on('resize', function(){ if ($(".sampleClass").css("float") == "none" ){ // your code here } }); |
CSS
1 2 3 4 |
.sampleClass {float:left;} @media only screen and (max-width: 800px){ .sampleClass {float:none;} } |
Ressources en ligne
- Importing CSS Breakpoints Into JavaScript
- matchMedia() polyfill – test whether a CSS media type or media query applies
- enquire.js – a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching.
- Tutoriel (en anglais) sur l’utilisation d’enquire.js.