A fix for iPhone viewport scale bug

Jeremy first raised his concern (about iPhone viewport scaling) and later by Andreas. My early view was stated here. Since this issue was raised, I have been trying to find ways to work around this problem. Below is a proof of concept of how to preserve the accessibility (scaling) without affecting the usability for the majority.

All we need to do to solve this problem is to dynamically reset the scale factors to default when user zoom the page. Here is a demo: http://www.lab.highub.com/m/scalefix.html

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

JavaScript:

  <script>
    var metas = document.getElementsByTagName('meta');
    var i;
    if (navigator.userAgent.match(/iPhone/i)) {
      for (i=0; i<metas.length; i++) {
        if (metas[i].name == "viewport") {
          metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
        }
      }
      document.addEventListener("gesturestart", gestureStart, false);
    }
    function gestureStart() {
      for (i=0; i<metas.length; i++) {
        if (metas[i].name == "viewport") {
          metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
        }
      }
    }
  </script>

Here is the code explanation:

1. we need to know what are the default minimum-scale, maximum-scale values, on iPhone’s official document, it’s mentioned the minimum-scale value is 0.25 by default, and the maximum-scale value is 1.6 by default. So to replace the default value, we need to set

function gestureStart() {
var metas = document.getElementsByTagName('meta');
var i;
for (i=0; i if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}

2. we need to know when to set this, this is very easy, iPhone has gesture event listener we can use to target the document body, here is how to do so:

document.addEventListener("gesturestart", gestureStart, false);

3. The last thing we need to take care about is to make sure this only happens on iPhone, again this can be easily done using:

if (navigator.userAgent.match(/iPhone/i)) {
document.addEventListener("gesturestart", gestureStart, false);
}

In this way, we can prevent the page scale jump issue by default if the user never initialize the zoom, allow greater user experience, at the same time, without compromising the accessibility for the minority.

This is a proof of concept, so do let me know if you have different view on this. :)

Update: 4/5/2011 There is a bit imperfection in this script, have a read of it here: https://gist.github.com/901295

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in Mobile and tagged , . Bookmark the permalink.

54 Responses to A fix for iPhone viewport scale bug

  1. Very rapidly this web site will be famous among all blog
    users, due to it’s nice content

  2. My family members every time say that I am killing
    my time here at web, except I know I am getting familiarity
    daily by reading thes nice articles.

  3. Lorenza says:

    It was hard for me to find your page in google. I found it on 15 position, you have to build a lot of quality
    backlinks , it will help you to increase traffic. I know how to
    help you, just search in google – k2 seo tips and tricks

  4. movie dragon says:

    When someone writes an piece of writing he/she maintains the idea of
    a user in his/her brain that how a user can be aware of it.
    Thus that’s why this piece of writing is great. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>