détecter automatiquement le changement de largeur de la fenêtre du navigateur Web?

Je sais que vous avec $ (fenêtre) .width () pouvez obtenir la taille du navigateur Web.

Je souhaite détecter le moment où l’utilisateur modifie la taille de son navigateur Web afin de pouvoir réajuster la largeur des colonnes. y a-t-il un moyen de détecter automatiquement ceci ou dois-je utiliser setTimeinterval pour boucler et voir s’il a changé?

Essayez l’ événement de redimensionnement

$(window).resize(function() { console.log('window was resized'); }); 

L’événement JavaScript s’appelle window.onresize .

La liaison JQuery est nommée .resize()

En écrivant cela, aucune de ces réponses ne donne la meilleure façon moderne de le faire:

 window.addEventListener("resize", function(event) { console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high'); }) 

Dans MDN, ils fournissent un très bon code autonome Javascript:

 window.onresize = resize; function resize() { alert("resize event detected!"); } 

Il faut au moins garder à l’esprit que dans IE, au moins, les événements de redimensionnement font une bulle et que les éléments positionnés et le corps du document peuvent déclencher des événements de redimensionnement indépendants.

En outre, Internet Explorer déclenche un stream continu d’événements ‘redimensionner’ lorsque la fenêtre ou l’élément est redimensionné en le faisant glisser. Les autres navigateurs attendent que la souris se déclenche.

IE est un joueur suffisamment puissant pour qu’il soit utile de disposer d’un gestionnaire intermédiaire qui redimensionne les événements, même si vous n’y twigz que des clients IE.

Le gestionnaire ie définit un délai d’expiration court (100 à 200 ms) avant d’appeler le gestionnaire de redimensionnement “réel”. Si la même fonction est appelée à nouveau avant l’expiration du délai, il s’agit soit d’un événement bubblng, soit du fait que la fenêtre est déplacée dans une nouvelle taille. Effacez donc le délai et redéfinissez-le.

J’utilise media = “uniquement l’écran et (min-width: 750px)” href = “… fichier css pour les grandes fenêtres” media = “uniquement l’écran et (max-width: 751px)” href = “… fichier css pour les mobiles ”

Lorsque je déplace la bordure droite des fenêtres vers la gauche et la droite pour augmenter et diminuer la taille de la fenêtre, mon navigateur Web bascule automatiquement de la grande fenêtre au mobile. Je n’ai pas besoin d’inclure de code Javascript pour détecter la largeur de la fenêtre. Cela fonctionne pour Chrome, Firefox et Internet Explorer sur les ordinateurs Windows et Macintosh.

Vous voudrez peut-être utiliser debounce : https://davidwalsh.name/javascript-debounce-function

Sinon le

 window.addEventListener("resize") 

Se déclenche tout le temps que le redimensionnement de la fenêtre est en cours. Ce qui taxera les frais généraux de votre CPU.