Hauteur de la fenêtre mobile après le changement d'orientation
Je suis attacher un écouteur à l' orientationchange
événement:
window.addEventListener('orientationchange', function () {
console.log(window.innerHeight);
});
J'ai besoin pour obtenir la hauteur du document après la orientationchange
. Cependant, l'événement est déclenché avant que la rotation est terminée. Par conséquent, l'enregistrement de la hauteur correspond à l'état avant le changement d'orientation.
Comment puis-je m'inscrire à un événement qui me permettrait de capturer élément dimensions après le changement d'orientation a été complété?
source d'informationauteur Dan Kanze
Vous devez vous connecter pour publier un commentaire.
Il n'y a aucun moyen de saisir la fin du changement d'orientation de l'événement en raison de la manipulation de l'orientation de l'évolution varie d'un navigateur à l'autre. Dessin d'un équilibre entre le plus fiable et le plus rapide pour détecter la fin du changement d'orientation exige des courses et de l'intervalle de délai d'attente.
Un écouteur est connecté à la
orientationchange
. Invoquant l'auditeur commence un intervalle. L'intervalle est le suivi de l'état dewindow.innerWidth
etwindow.innerHeight
. Leorientationchangeend
événement est déclenché lorsquenoChangeCountToEnd
nombre d'conséquente itérations de ne pas détecter une valeur de mutation ou aprèsnoEndTimeout
millisecondes, selon la première éventualité.Je suis maintenant une mise en œuvre de
orientationchangeend
qui s'étend sur la décrit ci-dessus de la logique.Changement d'Orientation a besoin d'un délai pour ramasser sur les nouvelles hauteurs et largeurs. Cela fonctionne à 80% du temps.
Gajus " et burtelli les solutions sont robustes, mais la charge est élevée. Voici une version slim qui est assez rapide, en 2017, à l'aide de
requestAnimationFrame
:L'utiliser comme ceci:
Utiliser l'événement resize
La redimensionner événement comprendra la largeur et la hauteur après une orientationchangemais vous ne voulez pas écouter tous les événements de redimensionnement. Par conséquent, nous avons ajouter un événement de redimensionnement de l'auditeur après un changement d'orientation:
Javascript:
jQuery:
N'utilisez PAS de délais d'attente
Délais d'attente ne sont pas fiables - certains appareils ne parviennent pas à capturer leur changement d'orientation au sein de votre codée en dur délais d'attente; ce peut être pour des raisons imprévues, ou parce que l'appareil est lent. Rapide périphériques inversement ont un retard inutile dans le code.
J'ai utilisé la solution proposée par Gajus Kuizunas pour un moment qui était fiable mais un peu lent. Merci, de toute façon, il a fait le travail!
Si vous êtes à l'aide de Cordoue ou Phonegap j'ai trouvé une solution plus rapide - juste au cas où quelqu'un d'autre est confronté à ce problème à l'avenir. Ce plugin renvoie la bonne largeur/hauteur: https://github.com/pbakondy/cordova-plugin-screensize
Le retour de la hauteur et la largeur de refléter la résolution réelle, donc vous pourriez avoir à utiliser la fenêtre.devicePixelRatio pour obtenir la fenêtre d'affichage de pixels. Aussi la barre de titre (batterie, l'heure, etc.) est inclus dans le retour de la hauteur. J'ai utilisé cette fonction de rappel initally (onDeviceReady)
Dans votre changement d'orientation gestionnaire d'événements, vous pouvez alors utiliser:
pour obtenir le innerHeight tout de suite. Espérons que cela aide quelqu'un!
J'ai aussi été confronté au même problème. J'ai donc fini par utiliser:
Pour les gens qui veulent seulement la
innerHeight
de la fenêtre de l'objet après laorientationchange
il existe une solution simple. Utilisationwindow.innerWidth
. LeinnerWidth
au cours de laorientationchange
événement est leinnerHeight
après l'achèvement de laorientationchange
:Je ne suis pas sûr si à 180 degrés sur les modifications sont effectuées dans deux 90 degrés ou pas. Vous ne pouvez pas simuler que dans le navigateur à l'aide d'outils de développement. Mais Si vous voulez vous protéger contre un 180, 270 ou 360 rotation, il devrait être possible d'utiliser
screen.orientation.angle
pour calculer l'angle et de l'utilisation de la bonne hauteur et la largeur. Lescreen.orientation.angle
cours de l'événement est l'angle de visée de laorientationchange
événement.