On their developers’ site, Apple has posted a fairly lengthy overview on developing applications for iPhone.

Of particular interest is the section on what extended CSS descriptors iPhone supports. From the articles:

To specify a style sheet that is just for iPhone without affecting other devices, you use the only keyword in combination with the screen keyword, as follows:

<link media="only screen and (max-device-width: 480px)"href="iPhone.css"
 type="text/css" rel="stylesheet" />

…

The viewport meta tag properties are:

• 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].
• You do not need to set each property. If only a subset of the properties are set, then Safari on iPhone attempts to infer the other values. For example, if you set the scale to 1.0, Safari assumes the width is 320 pixels in portrait and 480 pixels in landscape mode. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

Here are some examples of using the viewport meta tag:

<meta name="viewport" content="width = 320" /><meta name="viewport"
content="initial-scale=2.3, user-scalable=no" />

Much more information regarding specific CSS support, and other best practices are available in the article.