Recently I’ve been given a chance to do some work on formatting existing web content to display nicely on the iPhone. Normally, making webpages mobile-compatible consists of having simple layouts, large and readable (non-serifs) fonts, and little to no pictures/media. However, the iPhone has a fully capable browser which allows a web developer to throw existing mobile web pages out the window. That and the overall slickness of the device and its UI really discourages anyone from making mediocre Web1.0-looking pages.
The zooming on the iPhone’s web browser is pretty easy and intuitive, but I have never been a big fan of zooming. Even with the location specific zooming (via double-tapping on a text block or image) I still find it a bit cumbersome. Using the <viewport> meta tag, you can control the dimensions and scaling of your page. Here are the attributes that can be set, from the Apple iPhone web development website:
- width The default is 980. The range is [200, 10,000].
- height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].
- initial-scale is the scale to render the page when it first loads. The default fits the page to the screen. The range is [minimum-scale, maximum-scale]. Keep in mind that the user can change the scale, either through the pinch gesture or by a double tap.
- user-scalable determines whether or not the user can scale the page. The default is yes.
- minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].
- maximum-scale is the upper bound for scaling. The default is 1.6; the range is [>0, 10].
However, setting a specific width for the webpage is difficult because of the iPhone’s tilting capability. The screen, or viewport, is 320 pixels when in portrait mode, and 480 pixels in landscape view. To make a page look the same in both modes, the folks at iPhoneWebDev have discovered the following meta tag:
With this meta tag, you can set your page elements to be 100% width, and your pages will fit in both viewing modes. Font sizes will be consistent too! This is a good starting point for any webpage designed for the iPhone.