Detect change in orientation using javascript

Question

Is it possible to detect change in orientation of the browser on the iPad or Galaxy Tab using javascript? I think it\'s possible using css media queries.

Answer 1

You can use mediaMatch to evaluate CSS media queries, e.g.

window
    .matchMedia('(orientation: portrait)')
    .addListener(function (m) {
        if (m.matches) {
            // portrait
        } else {
            // landscape
        }
    });

CSS media query fires before the orientationchange. If you are looking to capture the end of the event (when the rotation has been completed), see mobile viewport height after orientation change.

Answer 2

You can use the orientationchange event like so:

window.addEventListener('orientationchange', function(){
     /* update layout per new orientation */
});