web-dev-qa-db-fra.com

screen.width/screen.height ne se met pas à jour après la rotation de l'écran

Je rencontre ce problème sur un périphérique iPhone (iPhone 7, iOS 10, mais aussi d'autres iPhones): en javascript, si j'intercepte l'événement d'orientationchange, dans le gestionnaire, screen.width et screen.height restent les mêmes (comme avant la rotation).

Comme cela peut dépendre des paramètres de la fenêtre d'affichage, voici comment ma fenêtre d'affichage est déclarée dans le fichier .html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />

Tout fonctionne bien dans la visualisation simulée de Chrome.

Merci d'avance pour votre aide.

javascriptiosiphonescreen-orientation
11
Gabriele D'Antona

Pour autant que je sache, la largeur/hauteur de l'écran ne changera pas après la rotation. Pour vérifier si le périphérique est en rotation, vous pouvez lire ces propriétés

  1. window.orientation: cette valeur passe de 0 à + 90/-90
  2. window.innerHeight/innerWidth: ces valeurs sont échangées
  3. document.documentElement.clientHeight/clientWidth: ces valeurs sont échangées

Malheureusement, ce comportement n'est pas cohérent sur tous les appareils Android/iOS/Window. Je pense que dans ceci la figure est bien expliquée.

13
dloeda

auparavant, iOS renvoyait la taille de l'écran comme si elle était en mode portrait . Ils l'ont modifiée sous iOS 8 (sur les classes natives), mais ils ont peut-être oublié de le faire pour Safari, ou l'ont peut-être conservé. pour la compatibilité.

Si vous voulez que la taille réelle soit basée sur l'orientation, vous pouvez utiliser window.innerWidth et window.innerHeight

J'obtiens les mêmes valeurs avec ou sans la balise méta viewport

Cela fonctionne bien sur la visualisation simulée de Chrome, car il renvoie la taille de l'écran de la visualisation simulée, comme il se doit, mais il ne simule pas le système d'exploitation où il devrait s'exécuter en fonction du périphérique. Vous n'obtiendrez donc pas les mêmes valeurs. comme sur un périphérique réel (dans ce cas, le périphérique réel ne renvoie pas de bonnes valeurs)

6
jcesarmobile

CSS ne peut pas détecter le changement d'orientation.

Utilisez JavaScript pour obtenir le changement d'orientation.

Ajouter la fonction en tant que

window.addEventListener("orientationchange", function() {
  document.body.style.width = window.innerWidth;
});

Cela ajoutera un event Handler à window pour changer la width de body lorsque l'orientation est modifiée.

Plus de références sur orientationchange

0
Sagar V

jQuery mobile a onOrienntetionChange event qui gère l'événement de changement d'orientation, et la fonction $(window).orientationchange(); permet de modifier l'orientation manuellement.

0
Yashar Aliabasi