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
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
- Sets the default screen size to snap to the device’s full screen
- Sets the Web page scale to a reading-friendly 1.0 level
- Stops pinch to zoom, which isn’t a bad thing if your form is sized to scale properly.
- 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.
Justin Cooney 