In a recent article, I explained how to build an iPhone-compliant website quickly. In this article, I'm going to tell you about some meta tags (and more), which can both make your website visitors' experience more enjoyable and save your web development efforts.

All the methods described in my articles have been successfully applied in one of my web projects. I used some screenshots of my website as illustrations in this article.
Well, let's start.

1. Detect the user's device by user-agent (PHP)

It's very easy to find out whether the browser is Mobile Safari, just use following code:



The example shows how my site z-music.ru adapts itself to the user's device.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{

// Code for Mobile Safari.

}
else{

// Code for other web browsers.
}

If you want to detect Android users too, modify the selection criteria:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'Android'))

2. Forbid increase/decrease of webpage size

If your webpage is optimized for Mobile Safari (width limited to 320px), surely you don't want it to be increased or decreased by the user. To disable pinch zoom, use the special meta tag:

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

3. Show your webpage scaled 1:1

To make sure that the user sees you site scaled 1:1 immediately after its loading, add the following tag (in this case, pinch zoom is not disabled).

<meta name = "viewport" content = "width=device-width">

4. Turn your webpage into a web application

Even in times of iPhone's first firmware versions, before AppStore was launched, web applications were extremely popular. What's so special with them?
Unlike usual webpages, web applications don't use Safari's standard UI, so the user doesn't see the usual address line and navigation panel.

To tell the web browser explicitly to treat your website as a web application, add the following meta tag:

<meta content="yes" name="apple-mobile-web-app-capable" />

It's very easy to add a web application, just do the following:
Enter Safari > press + on the navigation panel > select "Add to Homescreen."

4.1. Add a splashscreen for your web application

It's nice to add a splashscreen for your web application, otherwise the user will be looking at a blank screen while the app is loading.
The picture size must be 320x460 pixels.

<link rel="apple-touch-startup-image" href="/images/startup.png">

4.2. Add an icon

Use the following tag for installing the icon.
The icon size must be 57x57 pixels. Following Apple's standard, the browser automatically adds a rounded "glare" to the icon, although it's possible to disable the glare (see below).

<link rel="apple-touch-icon" href="/custom_icon.png"/>

4.3. Add a plain icon (without glare)

If glare is undesirable, you can easily add a glare-free icon: just name your icon file as apple-touch-icon-precomposed.png and put it into your website's root directory. (Make sure that you use exactly that filename and put the file into the root directory, otherwise it will not be found by the web browser!)

4.4. Change the color of your web application's status bar

To change the status bar color, use the following meta tag:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Here's how it looks:



That's all I wanted to say for now, thanks for your attention!