Designing for the iPhone

Notes to Myself



CSS for small screen (Max width 480 pixels):
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet" />
CSS for small screen (Min width 481 pixels):
<link media="screen and (min-device-width: 481px)" href="not-small-device.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

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

This determines whether or not the user can scale the page. The default is yes.

minimum-scale

The lower bound for scaling. The default is 0.25; the range is [>0, 10].

maximum-scale

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 orientation. 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" />

The recommended viewport width for web applications is 320 pixels. This renders the web application with a scale of 1.0 and doesn't change the layout when you switch to landscape orientation.




Use the information above to compute the available area for your web content when the keyboard is and isn't displayed. For example, when the keyboard is not displayed, the height available for your web content is: 480 - 20 - 60 - 44 = 356. Therefore, you should design your content to fit within 320 x 356 pixels in portrait orientation. If the keyboard is displayed, the available area is 320 x 140 pixels.