Android and iOS: Setting Default Web Page Zoom Level and Stopping Form Field Zoom on Focus

If you are developing a Web form for clean viewing on Android and iOS devices, then you’ll likely end up wanting to handle the zoom level at which your page initially loads, as well as possibly disabling distracting auto-zooms from happening if the user focuses on a form field element. Obviously in small forms this isn’t much of an issue, but in larger more functional forms, this can cause frustration and user confusion.

So how do you get Android and iOS devices to show your Web form cleanly and stop skipping around? In solving this problem, there are several workarounds, but what seems to work the best is using the ViewPort Meta-tag to tell the device browser how you would like it to handle the scaling of your Web form. As with most development, you should only use this tag if you’ve looked at the pros and cons associated with it, and have tested it on the devices/browsers you want your Web application to support.

A Basic ViewPort Meta-Directive Would Be:

<meta name='viewport' content='user-scalable=0'>

Extending this to a More Effective ViewPort Meta-Directive

The example above sets the screen size to a small-ish version that you may not necessarily be a fan of. Significantly better is the extended version of the tag as shown below:
<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
The additional parameters in this tag lock the screen size at a friendly scale (to the device’s full screen) and also stop the UI from jumping when the user takes an action.
More specifically, this tag:
  1. Sets the default screen size to snap to the device’s full screen
  2. Sets the Web page scale to a reading-friendly 1.0 level
  3. Stops pinch to zoom, which isn’t a bad thing if your form is sized to scale properly.
  4. Stops the auto-focus when the user clicks to edit a form field… This increases the performance of your Web form. Further, depending on your particular page, there are a number of other reasons to disable zoom. for example, the zoom can cause problems depending on your JavaScript, especially if you are using it to window sizing.

Works in Android and iOS

I tested the meta tag below on various Android devices and iOS, and it behaves well in both.

Further Reading:

If you want to read more details about using the ViewPort Meta tag and want to have a look at possible JavaScript, then have a look at the Google developers documentation here:
Here is a link where people are talking about different solutions to the issue for Android:
And here is a similar discussion for iOS:
The extended Meta tag is suggested on both sites, and it works well in my testing of both device types, better than other work-arounds.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s