JavaScript orientation change issues in Internet Explorer

Question

I need to execute some JavaScript logic every time a mobile device switches from portrait to landscape orientation. I'm using the following check to accomplish this:

var doOnOrientationChange = function() {
if (window.innerWidth > window.innerHeight) {
// Execute logic for users who are switching to landscape mode
}
};

This works for all iPhone and Android browsers, but it fails for IE10 on Windows Phone 8. Sometimes when IE10 users tap on an input, the logic for landscape mode triggers.

Why does IE10 perceive this action as the user switching to landscape mode?

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Use resize event instead of orientationchange for IE10. There is no orientationchange event in Windows Phone 8.

jQuery code:

$(window).on('resize', function () {
    if (window.innerWidth > window.innerHeight) {
        // Execute logic for users who are switching to landscape mode
    }
});

Also, please, read this answer to know how orientationchange and resize events fire in Android and iOS devices.

JavaScript orientation change issues in Internet Explorer

1 Answers1