I get asked this a lot by various people so thought I would share my thoughts.

I have seen a few posts on here too about making websites for the iPhone by creating new css or a new template to give the cut down, standard mobile device look to a website.

Why?

iPhones are supposed to display the full site so why not take advantage of this.

All my sites have two lines of code in the head to help with iPhones etc.

These are:

CSS

When you build a site using css, the iphone can sometimes display elements larger than they are supposed to be. There is nothing wrong with your css but its how the iPhone handles some elements.

To stop this:

1. copy your sites css file and call it 'iphone.css'. Place in your themes folder.

2. Within the body tag of the css place this line in: '-webkit-text-size-adjust: none;'
This forces the iPhone to keeps the site elements as they should. This does not stop the scaling of the site using the pinch method etc.

3. Within the head place this line of code:

<link rel="stylesheet" media="only screen and (max-device-width: 980px)" type="text/css" href="<?php echo $this->getStyleSheet('iphone.css')?>" />

This lets the iPhone know to load up the new css file.

Bookmark icon
I always place an iPhone bookmark graphic on the site so when a user bookmarks the site to there phone, a custom icon will appear like an app.

Create your graphic and call it something like 'iphonebookmarkicon.png' (has to be a PNG) and place in your themes image folder.

In your head place this line of code:

<link rel="apple-touch-icon" href="<?php echo $this->getThemePath()?>/images/iphonebookmarkicon.png" />

Thats it.

A lot of you probably know these already but for those who don't, hope this helps.