The iPhone has many cool features that help to increase ease of use and productivity. One such feature is ‘pinch and zoom’. It allows the user to quickly zoom in or out of the desired portion of a web page. Another interesting feature is the auto zooming of input fields in Safari. When the user taps the input field the browser automatically zooms in onto the input field. While this may be great for a regular website being viewed on the phone, it might be undesirable for dedicated iPhone web apps.

At first glance, one would probably think that using CSS or JavaScript to control the zooming would be the solution. However, this is not the case. Apple has implemented a special META tag to handle this.

<meta content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

Other mobile browsers are implementing this as well, including the upcoming Mobile Firefox(Fennec) for the Android OS. This should help to make it easier to design sites with consistent behaviors across multiple mobile browsers.