HTML5, CSS3, jQuery, JSON, Responsive Design...

iOS web browser orientation problems

Michael Brown   July 19 2012 11:47:28 PM

Responsive Design

As I mentioned in my last post, I've been working on reconfiguring this blog for responsive design.  As part of that process, I've been testing how the site looks in various mobile phones (or mobile phone emulators, as the case may be) and came across some strange anomalies with the iPhone.

iPhone Problem 1 - Landscape flip doesn't zoom out correctly

The first image below shows how the site looks in portrait mode on the iPhone.  Everything looks fine there, but just look what happens when I flip it over to landscape mode (second image below).

iPhone browser in portrait mode  iPhone browser in landscape mode


What happened here?  It's still zoomed in to a small portion of the site when it should be showing the whole thing.  Turns out to be a bug in iOS browsers.  I googled several workarounds to the problem, the best of which involves a JavaScript fix.  Here's the code for the fix:

(function(doc) {

      var addEvent = 'addEventListener',
          type = 'gesturestart',
          qsa = 'querySelectorAll',
          scales = [1, 1],
          meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

      function fix() {
              meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
              doc.removeEventListener(type, fix, true);
      }

      if ((meta = meta[meta.length - 1]) && addEvent in doc) {
              fix();
              scales = [.25, 1.6];
              doc[addEvent](type, fix, true);
      }

}(document));


Of course, you only need to include that code when you're on iOS.  I put the code in a library called iphonerotatefix.js, and here's how I insert that file for iOS only (replacing the square brackets with angled ones):

if((navigator.userAgent.match(/iPhone/i)) ||
 (navigator.userAgent.match(/iPod/i)) ) {
     document.write("[script type='text\/javascript' src='iphonerotatefix.js'][\/script]");
}


If you want to include the fix for iPad, then you'll have to include a userAgent.match for that too.  For my own current needs, the iPad screen is big enough that I don't need to worry about it.

Here's how it looks in landscape mode with the fix in place:

iPhone browser in landscape mode, almost fixed

Now my the screen snaps to the sides correctly.  I can see the whole thing, on the horizontal axis, so everything's fine....



iPhone Problem 2 - Big text in landscape mode

... except is isn't.  Fine, I mean.

Look again the "fixed" landscape screenshot above and compare it to the portrait mode version further up the page.  See how the text is wrapping at almost the same point?  It's because the text is all now in a much bigger font for some reason.  I'm not sure if this is a bug or it's down to Apple treating users like idiots.  Whatever, when I flip to landscape mode it's because I want to see more of my site; not because I want to see the same part of it, only bigger!!!

Android does it right, as shown by the two screenshots below, taken from the Android emulator:

android browser in portrait mode  Android browser in landscape mode


Thankfully, there's an easy fix to have iOS do it right too.  You need to include this code in your CSS:
body {
    -webkit-text-size-adjust:100%;
}


Bingo.  Here's how it now looks in iOS with this second fix in place:
iPhone browser in landscape mode, fixed

You can see that the text it no longer pumped up to that large size, so the site is able to make proper use of the extra width in landscape mode.
 
Comments
No Comments Found

About