I'm attempting to tell when the screen size changes on a mobile website. The problem is each browser implements this differently. I thought I could check for orientationchange support and use that but fall back to resize event, but this leads to the following problems:
- In Dolphin HD, orientationchange gives me the width from the previous orientation
For example, in portrait it's 384 and landscape is 589. If I rotate to landscape from portrait, it'll report an orientation change to a window.innerWidth of 384 which is the portrait's. If I then rotate to portrait, it reports 589, which is landscape's width!
- If I use the resize event, it's called THREE times!
This occurs in Chrome, Firefox. So it might be an Android issue. It does end up with the correct width on the third call but before that it's a different width so it causes my code to resize things multiple times. That's not very responsive.
What is the solution?