Comment utiliser correctement l’event onresize ?

L’évènement onresize n’est pas exploitable en tant que tel. Si vous consulter cette page sur mobile, vous pourrez constater que cet évènement se déclenche assez fréquemment lors du scroll ; et ce dernier ne mesure donc pas le changement de taille de la page en tant que tel.

Pour exploiter cet évènement, nous devons donc fixer un seuil à partir duquel on pourra considérer que l’utilisateur a réellement modifié la taille de sa fenêtre.

La largeur et la hauteur de la page affichée peut être obtenue avec

document.querySelector("html").clientWidth

document.querySelector("html").clientHeight

Largeur Ecran:

Hauteur Ecran:

Nous pouvons à présent étudier la réduction de la taille de l’écran en réutilisant utilisant la propriété event.currentTarget.visualViewport de l’event onresize

Nous obtenons ainsi

Compatibilité avec votre configuration


Nom de l’event : Compatibilité avec votre device & navigateur ; Nombre de déclenchements

Nb Déclenchement : ; 0

Width : 0 ; 0 ; 0 ; 0 ; 0

Height : 0 ; 0 ; 0 ; 0 ; 0

Sur mobile, on se rend compte que l’évènement onresize enregistre uniquement des variation qui concernent la hauteur de la fenêtre.

Après plusieurs essais on s’aperçoit que le coupable est situé en bas de la page : il s’agit du bandeau de navigation présent sur la plupart des Androids et IOS

barre bas Samsung Galaxy S6

La barre de navigation présente en bas de page apparait (ou disparait) typiquement lorsque l’utilisateur scroll vers le haut puis vers le bas. Lorsque cela se produit, votre navigateur mobile considère que la taille de la fenêtre a été modifiée et déclenche un event onresize.

Ce cas de figure déclenche à tort un event onresize et nous devons donc désactiver ce cas de figure.

Puisque le resize vertical pose problème, nous allons utiliser le resize horizontal. Un onresize pour lequel on a eu une modification de plus de 3% de la taille de la page pourrait constituer un seuil intéressant pour ne pas avoir notre donnée polluée.

Compatibilité avec votre configuration


Nom de l’event : Compatibilité avec votre device & navigateur ; Nombre de déclenchements

Onresize: ; 0;

Width : 0 ; 0 ; 0 ; 0 ; 0

Height : 0 ; 0 ; 0 ; 0 ; 0

Étiquettes: