Style chooser

iPhone css

Optimizing your site for iPhone visitors is, depending on your site structure, fairly simple.

First start with a separate stylesheet for the iPhone by using

<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)"><!--<![endif]-->

This will be ignored by other browsers (do include the 'if !IE' to stop older IE versions from opening the iPhone stylesheet).
Remember that this does not replace the normal stylesheet but is an addition. You might need to undo widths or other settings for bigger screens.

Also, you do need to add a special meta events

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Normally the iPhone tries to size the site for best viewing. For iPhone optimized sites this is not necessary because the size should match the iPhone screen.

If you like you can add
<link rel="apple-touch-icon" href="/iphone.png"/>

This points to a special 57 x 57 pixel icon. When bookmarking your website on the homescreen the iPhone will show this image (no need to add the glossy glow and rounded corners, the iPhone does that for you).

A good font to use is Helvetica, since that is available by default on an iPhone. You might want to change you menu, or maybe even hidding it completly and redirecting people to menu or overview pages. Remember to make optimum use of the small iPhone screen, so avoid unnessecary elements, logo's etc.

Leave a reply.