How to make a website more iPhone-compatible in 5 steps

The fact that the iPhone offers the most advanced mobile browser among mobile platforms will probably not be doubted by anyone. However, not everyone knows that quite a small effort can make the site even more friendly to those who watch it on the iPhone or iPod Touch.

Below are a simple 5 steps to begin with, using the example of a WHOIS site Digger .

Step 1. Analogue of favicon.ico
')
When a user creates a link to your website as an icon in SpringBoard, the iPhone automatically generates a picture from the screenshot of the page. As a result, almost always there is unintelligible porridge, which in no way pulls the proud title of “icon for iPhone”. Write this tag in the page header:

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

and add a res / iphone_icon.png image corresponding to 57x57 pixels. The iPhone itself will add rounded corners and a semi-circular highlight, making your icon look like the rest.

This is how the original picture and icon on the iPhone desktop looks like:



Step 2. Fullscreen mode (almost).

Adding this tag here will result in your website being launched from the SpringBoard icon, similar to a standalone application (neither the address entry / search string, nor the lower toolbar will be displayed). Only the top status bar will remain.

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

Cons - navigation on the site should be self-sufficient, because the browser's Back / Forward buttons can no longer be relied upon.

This is the kind of website launched from the desktop icon. As you can see, nothing superfluous.



Step 3. Adapt the scaling range

If your site is not initially displayed on the iPhone in full screen, then you can choose the initial display scale, maximum display scale and, if necessary, prohibit scaling with your fingers at all (if the entire site fits horizontally on the screen when the scale is selected):

<meta name="viewport" content="width=device-width; initial-scale=0.85; maximum-scale=0.85; user-scalable=0;" />

Step 4. Add CSS styles designed for iPhone only.

This is how you can connect a separate CSS, which will be perceived only on the iPhone:

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

Critically evaluate the look of your site on the iPhone and see which elements of navigation and content can be enlarged so that it is easier to get a finger across them. What kind of blocks can you hide or reduce on the iPhone? Is it possible to bring the site to a one-column layout, for which it is easier to choose the scale? It is clear that the development of a full-fledged style of the site for the iPhone is a responsible occupation, but some moments can be corrected quickly enough.

Step 5. Cancel automatic scaling correction

If your site uses Ajax requests or Javascript to dynamically change the content of a page, you may observe unpleasant side effects in the form of changing the text scale when DOM changes or when some elements are collapsed / displayed. The following piece of CSS will disable the built-in heuristics of Mobile Safari and eliminate these effects:

html {
-webkit-text-size-adjust: none;
}

As a result, in 15 minutes of work, we got a full-fledged web application for the iPhone:



PS: Now you can download the WHOIS source code Digger for installation on your website.