Line of Site Web Design Articles

Modifying your site to view on an iPhone

A List Apart has some useful information on developing websites for Apple's iPhone.

While the iPhone has been designed so that you really don’t need to do anything with your site for it to display correctly, there is one area where you may want to make a small modification to deal with the problem of fitting a relatively large web page onto a small phone display. By specifying the size of the iPhone’s viewport you ensure that you make best use of the available screen space.

When you open a page in Mobile Safari, it will render a 980-pixel-wide section of your website (Apple chose this size to accommodate the largest number of websites). It will then shrink these 980 pixels to the iPhone’s 320-pixel-wide screen.

Thanks to a new <meta> tag recognized by the iPhone, you can control the behavior of the viewport. For example, your website may have been created in the days when a width of 760 pixels was the norm to accommodate average browser resolutions of 800 pixels wide. By specifying the following <meta> tag inserted in the head section of your page, you can tell Mobile Safari how big to make the initial viewport:

<meta name="viewport" content="width=760" />

This cuts the number of pixels the iPhone has to squeeze onto its screen from 980 to 760. It may not seem like much, but when you consider that the phone’s display width is just 320 pixels, it really does make a big difference.