Je sais que vous avec $ (window) .width() peut obtenir la taille du navigateur Web.détecter automatiquement la modification de la largeur de la fenêtre du navigateur Web?
je veux détecter lorsque l'utilisateur modifie la taille de son navigateur Web pour que je puisse réajuster la largeur des colonnes. est-il un moyen de détecter automatiquement cela ou dois-je utiliser setTimeinterval pour faire une boucle et voir si elle a changé?
Essayez le resize event
$(window).resize(function() {
console.log('window was resized');
});
L'événement JavaScript est nommé window.onresize.
La liaison JQuery est nommé .resize()
Quelque chose à garder à l'esprit- dans IE, au moins, redimensionner la bulle des événements et des éléments positionnés et le corps du document peut déclencher des événements resize indépendants.
En outre, IE tire un courant continu d'événements de redimensionnement « » est redimensionnée lorsque la fenêtre ou de l'élément en faisant glisser. Les autres navigateurs attendent que le mousquet se déclenche.
IE est un joueur assez grand qu'il est utile d'avoir un gestionnaire intermédiaire des champs redimensionner Events- même si vous seule branche clients IE à elle.
Le gestionnaire définit par exemple un court délai d'attente (100-200 msec) avant d'appeler le gestionnaire redimensionnez « réel ». Si la même fonction est rappelée avant le timeout, il s'agit d'un événement bubblng ou la fenêtre est déplacée vers une nouvelle taille, effacez le timeout et redéfinissez-le.
En MDN ils donnent un très bon code Javascript autonome:
window.onresize = resize;
function resize()
{
alert("resize event detected!");
}Si vous avez juste besoin de ce genre de fonctionnalités que je vous recommande d'y aller.
J'utilise media = "seul écran et (min-width: 750px)" href = "... fichier CSS pour de larges fenêtres" multimédias = "seul écran et (max-width: 751px)" href = « ... fichier css pour les mobiles »
Lorsque je déplace la frontière de fenêtres à droite à gauche et à droite pour augmenter et diminuer ma taille de la fenêtre, mon navigateur passe automatiquement de la grande fenêtre sur le 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.
La rédaction de ce bas la cause en quelque sorte aucune de ces réponses donnent la façon dont les meilleures pratiques modernes de le faire:
window.addEventListener("resize", function(event) {
console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
Vous pouvez utiliser debounce: https://davidwalsh.name/javascript-debounce-function
Sinon, le
window.addEventListener("resize")
est-ce que le feu tout le temps que le redimensionnement de la fenêtre est en cours. Ce qui va taxer les frais généraux de votre processeur.
Ceci est également déclenché par le zoom des navigateurs mobiles, il devrait y avoir un si besoin de vérifier manuellement les tailles par rapport à une valeur précédente. – Hoffmann
Mais ce n'est pas tout à fait ce qu'on m'a demandé (ou ce que je cherche). Si, par exemple, vous téléchargez un fichier en chrome, la barre "Téléchargements" en bas de la page s'affiche, modifiant la hauteur de votre navigateur et déclenchant correctement l'événement de redimensionnement. Ce n'est pas un changement de largeur, donc vous obtenez un événement dont vous avez besoin pour filtrer (ce que je cherche ...) – philw