CODEWITHSUNDEEP
javascriptiosiphoneorientationscreen-orientation
Cameron
Cameron

Reputation: 1067

JS orientation change listener not firing on iOS but on Android it does

I have this code:

window.addEventListener("orientationchange", orientation);

But it isn't firing orientation() on iPhone SE running iOS 10.3, but it is firing on Moto G running Android 5.1.

I need it to update something that depends on the screen width. I have it using window.innerWidth and screen.width if it is undefined (browser differences).

My orientation() is the following:

cpr = Math.floor(window.innerWidth/100) - 3;
if (navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Android/i)) cpr = Math.min(Math.floor(screen.width/100) - 1, 8);
if (!cpr || cpr <= 0) cpr = 1;
id('times').innerHTML = "";
updateTimes();

The code works fine, it is just not working on iOS. I tried it in the Chrome dev tools device viewer which lets you use different specific phones or devices to test out the screen size and browser/device styling/code/user-agent. It worked fine there.

I tried looking at all the other Stack Overflow questions about this but they didn't answer my problem.

You can view the website at http://rucubing.bitballoon.com to see how it works.

Thanks!

Upvotes: 1

Views: 1446

Answers (1)

cocoa
cocoa

Reputation: 129

I have a similar problem with the resize event. I find the reason on this page.

Up until recently Mobile Safari has correctly posted the resize event after the viewport was resized and after page layout. However, that’s no longer the case. Instead it’s posted before the page has been completely laid out. Any JavaScript relying on clientWidth, clientHeight, getBoundingClientRect etc. in an onresize callback is now broken.

Maybe the orientationchange event is also fired before the the page has been completely laid out,so window.innerWidth return a wrong value.

EDIT:

Recently I find that document.documentElement.clientWidth returns the right value. Maybe this can help you.

Upvotes: 1

Related Questions