0

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?

Stefan
  • 5,203
  • 8
  • 27
  • 51
Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
  • When your resize event fires, are you able to read the correct sizes with `document.body.clientWidth` and `document.body.clientHeight`? I'm not sure, but that should still be supported in mobile. – krillgar Apr 12 '13 at 17:06
  • @krillgar Yes, on Android it appears I can cache the clientWidth and then ignore the later 2 calls of my listener. But I don't have an iPhone to test on so I don't know how it acts there. – Don Rhummy Apr 12 '13 at 17:19
  • In your post, is it the resize event that fires three times? Just as another spitball (since no one else has responded), are you able to get the orientation of the screen? It'd be sloppy, but if you know it's landscape, the wider of the two values would be what you're looking for would be the width. – krillgar Apr 12 '13 at 18:16
  • Does the resize event fire after the orientation change event ? – Parthik Gosar Apr 12 '13 at 18:23
  • @krillgar yes, it's resize that fires 3 times. – Don Rhummy Apr 12 '13 at 18:54
  • What about the part about detecting the current orientation to determine which size should be which? – krillgar Apr 12 '13 at 19:11
  • @krillgar On Chrome - onorientationchange fires once and correctly. On Firefox it doesn't fire at all. On Dolphin it fires once but with the wrong size. On opera, it did not fire. – Don Rhummy Apr 12 '13 at 19:40
  • @ParthikGosar I don't know, but why does this matter? Orientation support is so buggy across browsers that it's not a good solution. – Don Rhummy Apr 12 '13 at 19:41
  • I was just thinking if the problem could be solved through the combination of orientationchange and resize events. – Parthik Gosar Apr 13 '13 at 16:13
  • @ParthikGosar That's what I'm attempting. I use onoreintation for iPhone only and resize for everything else. – Don Rhummy Apr 16 '13 at 19:49
  • Just read [this](http://stackoverflow.com/a/6603537/2525067) – Alex Feb 06 '14 at 12:02

0 Answers0