screen.width / screen.height no actualiza después de la rotation de la pantalla

Estoy experimentando este problema en un dispositivo iPhone (iPhone 7, iOS 10, pero también otros iPhones): en javascript, si intercepto el evento orientationchange, dentro del manejador, screen.width y screen.height siguen siendo los mismos (como antes de la rotation).

Dado que esto puede depender de la configuration de la window gráfica, así se declara mi vista en el file .html:

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

Todo funciona bien en la visualización simulada de Chrome.

Gracias de antemano por tu ayuda.

Por lo que sé pantalla, el ancho / altura no cambiará en el dispositivo después de la rotation. Para verificar si el dispositivo está rotado, puede leer estas properties.

  1. window.orientation : este valor cambia de 0 a + 90 / -90
  2. window.innerHeight / innerWidth : estos valores se intercambian
  3. document.documentElement.clientHeight / clientWidth : se intercambian estos valores

Desafortunadamente, este comportamiento no es consistente en todos los dispositivos Android / iOS / Window. Creo que en esta figura es bastante explicada.

iOS solía devolver el tamaño de la pantalla como si estuviera en retrato. Lo cambiaron en iOS 8 (en las classs nativas), pero tal vez se olvidaron de hacerlo para Safari, o tal vez lo mantuvieron así para la compatibilidad.

Si desea el tamaño real según la orientación, puede usar window.innerWidth y window.innerHeight

Obtengo los mismos valores con o sin la label meta de viewport.

Funciona bien en la visualización simulada de Chrome porque devuelve el tamaño de pantalla de la visualización simulada, como debería ser, pero no simula el sistema operativo donde debería ejecutarse en function del dispositivo, por lo que no obtendrá los mismos valores como en un dispositivo real (en este caso en el que el dispositivo real no devuelve buenos valores)

jQuery mobile tiene onOrienntetionChange evento onOrienntetionChange que gestiona el evento de cambio de orientación, y hay $(window).orientationchange(); function para cambiar la orientación manualmente.

CSS no puede detectar el cambio de orientación.

Use JavaScript para get el cambio de orientación.

Añade la function como

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

Esto agregará un event Handler a la window para cambiar el width del body cuando se cambia la orientación.

Más reference en el orientationchange de orientationchange