Search code examples
javascripthtmlmobileviewportorientation-changes

Mobile viewport height after orientation change

I am attaching a listener to the orientationchange event:

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

I need to get the height of the document after the orientationchange. However, the event is triggered before the rotation is complete. Therefore, the recorded height reflects the state before the actual orientation change.

How do I register an event that would allow me to capture element dimensions after the orientation change has been completed?

Solution

  • Orientation change needs a delay to pick up on the new heights and widths. This works 80% of the time. 

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