web-dev-qa-db-fra.com

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 veux détecter quand l'utilisateur change la taille de son navigateur Web afin de pouvoir réajuster la largeur des colonnes. y at-il un moyen de détecter automatiquement cela ou dois-je utiliser setTimeinterval pour boucler et voir s'il a changé?

javascriptjquerybrowserwindowdetect
23
ajsie

Essayez l'événement resize

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

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

La liaison JQuery est nommée .resize()

20
Pekka 웃

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

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

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

Si vous avez besoin de ce type de fonctionnalité, je vous le recommande.

5
jasmo2

Il faut 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.

De plus, IE déclenche un flux 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 y branchez uniquement _ 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. 

3
kennebec

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

Sinon le 

window.addEventListener("resize")

Se déclenchera tout le temps que le redimensionnement de la fenêtre est en cours. Ce qui taxera la charge de votre CPU.

0
Luke Dohner

Voici un petit morceau de code que j'ai mis en place pour la même chose.

(function () {
    var width = window.innerWidth;

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();
0
Anshul Sanghi

J'utilise Media = "uniquement l'écran et (min-width: 750px)" href = "... fichier css pour les fenêtres larges" Media = "uniquement l'écran et (max-width: 751px ) "href =" ... fichier css pour 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.

0
Jacob Palme