Altura de la window mobile después del cambio de orientación

Adjunto un oyente al evento de cambio de orientationchange :

 window.addEventListener('orientationchange', function () { console.log(window.innerHeight); }); 

Necesito get la altura del documento después del cambio de orientationchange . Sin embargo, el evento se desencadena antes de que se complete la rotation. Por lo tanto, la altura registrada refleja el estado antes del cambio de orientación real.

¿Cómo logging un evento que me permita capturar las dimensiones de los elementos después de que se haya completado el cambio de orientación?

No hay forma de capturar el final del evento de cambio de orientación porque el event handlingl cambio de orientación varía de un browser a otro. Trazar un equilibrio entre la forma más confiable y la más rápida de detectar el cambio de fin de orientación requiere intervalo de carrera y time de espera.

Un oyente se adjunta a la orientationchange . Invocar al oyente inicia un intervalo. El intervalo es el seguimiento del estado de window.innerWidth y window.innerHeight . El evento orientationchangeend se noChangeCountToEnd cuando noChangeCountToEnd número de iteraciones consecuentes no detecta una mutación de valor o después de noEndTimeout milisegundos, lo que ocurra primero.

 var noChangeCountToEnd = 100, noEndTimeout = 1000; window .addEventListener('orientationchange', function () { var interval, timeout, end, lastInnerWidth, lastInnerHeight, noChangeCount; end = function () { clearInterval(interval); clearTimeout(timeout); interval = null; timeout = null; // "orientationchangeend" }; interval = setInterval(function () { if (global.innerWidth === lastInnerWidth && global.innerHeight === lastInnerHeight) { noChangeCount++; if (noChangeCount === noChangeCountToEnd) { // The interval resolved the issue first. end(); } } else { lastInnerWidth = global.innerWidth; lastInnerHeight = global.innerHeight; noChangeCount = 0; } }); timeout = setTimeout(function () { // The timeout happened first. end(); }, noEndTimeout); }); 

Estoy manteniendo una implementación de orientationchangeend que se extiende sobre la lógica descrita anteriormente.

El cambio de orientación necesita un retraso para detectar las nuevas alturas y anchuras. Esto funciona el 80% del time.

 window.setTimeout(function() { //insert logic with height or width calulations here. }, 200); 

Las soluciones de Gajus y Burtelli son robustas, pero la sobrecarga es alta. Aquí hay una versión delgada que es razonablemente rápida en 2017, utilizando requestAnimationFrame :

 // Wait until innerheight changes, for max 120 frames function orientationChanged() { const timeout = 120; return new window.Promise(function(resolve) { const go = (i, height0) => { window.innerHeight != height0 || i >= timeout ? resolve() : window.requestAnimationFrame(() => go(i + 1, height0)); }; go(0, window.innerHeight); }); } 

Úselo así:

 window.addEventListener('orientationchange', function () { orientationChanged().then(function() { // Profit }); }); 

Utilicé la solución propuesta por Gajus Kuizunas durante un time que fue confiable aunque un poco lenta. Gracias, de todos modos, ¡hizo el trabajo!

Si está utilizando Cordova o Phonegap, encontré una solución más rápida, por si acaso alguien más se enfrenta a este problema en el futuro. Este complemento devuelve los valores de ancho / alto correctos de inmediato: https://github.com/pbakondy/cordova-plugin-screensize

Sin embargo, la altura y el ancho devueltos reflejan la resolución real, por lo que es posible que tenga que usar window.devicePixelRatio para get píxeles de la vista. Además, la barra de título (batería, time, etc.) está incluida en la altura devuelta. Usé esta function de callback initally (onDeviceReady)

 var successCallback = function(result){ var ratio = window.devicePixelRatio; settings.titleBar = result.height/ratio-window.innerHeight; console.log("NEW TITLE BAR HEIGHT: " + settings.titleBar); }; 

En su controller de events de cambio de orientación puede usar:

 height = result.height/ratio - settings.titleBar; 

para get la Altura interior de inmediato. ¡Espero que esto ayude a alguien!

También me enfrenté al mismo problema. Así que terminé usando:

 window.onresize = function(){ getHeight(); }