After noticing the high percentage of people accessing our website via iPhone and iPod touch devices we decided to optimize the layout for these platforms.

In essence, It comes down to determining the user agent ID (browser type) and serving the specific iPhone CSS file for the iphone/ipod touch platform. For example iPhone will leave the following user agent footprint:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)
Version/3.0 Mobile/1A543a Safari/419.3
The platform string is: (iPhone; U; CPU like Mac OS X; en)
The version string is: Version/3.0 Mobile/1A543a Safari/419.3

There are several types of queries that you could use according to CSS3 (for example print, handheld, and screen) ,however, iPhone ignores the print and hand-held media queries because these types do not supply high-end content. So the screen query is what you need to use.

This is how you would specify a style sheet that is just for the iPhone platform without affecting any other devices:

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

What will happen with the older browsers is that they will ignore the “only” keyword and won’t read your iPhone style sheet, so you would need to use an expression similar to the following:

<link media="screen and (min-device-width: 481px)"
    href="not-small-device.css" type="text/css" rel="stylesheet" />

iPhone uses the concept of viewpoints to display the content. Conceptually, viewpoint works like a magnification glass that once you open a site in Safari, will render the page at 980 pixels wide section and then shrink that 980 pixels at 320 pixels (resolution of the iPhone screen).

As you pinch or spread your fingers you are setting the magnification of the viewpoint. So how do we use
this? There is a new META tag recognized by the iPhone platform that allows you to set the default viewpoint magnification level and here is the example:

<meta name="viewport" content="width=720" />
Another good practice is to implement “click to call” links. Iphone can launch a phone call directly from a web page. However, on other platforms clicking on this kind of  link will result in an error; so it’s best to turn it off in a main CSS style sheet and then turn in on in the iPhone Style sheet. Here is how you use it

<a class="call" href="tel:555-1212">Call Me</a>

If you are still having trouble or if you are not achieving desired results let us know and we will help you get over the troublesome part or create an iphone specific style-sheet for your web site in no time.