Détecter un breakpoint avec JavaScript

"breakPointWidth" est une fonction JavaScript qui permet de connaître le plus élevé des points de rupture atteint pour la largeur de la page. Elle utilise la méthode native "matchMedia" pour tester des requêtes media contenant des breakpoints correspondant à des tailles en pixels (par défaut : 1920, 1024, 768, 320).

function breakPointWidth(a) {
  a = a || [1920, 1024, 768, 320];
  a = a.sort(function(x, y){ return y - x; });
  for (var k = 0, l = a.length; k < l; k++) {
    if (window.matchMedia('(min-width: ' + a[k] + 'px)').matches) {
      return a[k];
    }
  }
  return 0;
}

breakPointWidth();
// renvoie par exemple : 1024

Il est possible personnaliser les breakpoints à tester en passant une liste de tailles en arguments de la fonction.

breakPointWidth([1920, 1024]);
// renvoie par exemple : 1920

Cet article vous a-t-il été utile ?

Super :)
Merci d'avoir donné votre avis !

Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !

^