How to make your site more iPhone-compatible in 5 steps

The fact that the iPhone offers the most developed mobile browser among mobile platforms, perhaps, no one will doubt. However, not everyone knows that with a little effort you can make the site even more friendly to those who watch it on their iPhone or iPod Touch.

The following are simple 5 steps to get you started using the WHOIS Digger website as an example .

Step 1. Analog of favicon.ico

When a user creates a link to your site as an icon in SpringBoard, iPhone automatically generates a picture from a screenshot of the page. The result is almost always an illegible mess, which does not pull in the proud title of “iPhone Icon”. Write this tag in the page title:



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

Here is the original picture and the icon on the iPhone desktop:



Step 2. Full screen mode (almost).

Adding this tag here will result in your site being launched using the icon from SpringBoard, looking like a stand-alone application (neither the address / search input line nor the lower toolbar will be displayed). Only the top status bar will remain.



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

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



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, disable finger scaling at all (if the entire site fits horizontally on the screen on the screen ):



Step 4. Add CSS styles designed only for iPhone.

This is how you can connect separate CSS that will be perceived only on iPhone:



Critically assess the look of your site on the iPhone and see which navigation and content elements can be enhanced to make it easier to hit with your finger. What blocks can I hide or reduce on my iPhone? Is it possible to bring the site to a single-column layout, for which it is easier to choose the scale? It is clear that the development of a full-fledged website style for the iPhone is an important task, but some points can be corrected quite quickly.

Step 5. Canceling automatic scaling correction

If your site uses Ajax-requests or Javascript to dynamically change the content of the page, you can observe unpleasant side effects in the form of a change in the scale of the text when changing the DOM or folding / display of some elements. The following piece of CSS will disable the built-in heuristics of mobile Safari and get rid of these effects: As a result, in 15 minutes of work, a full-fledged web application for the iPhone has turned out:

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





PS: now you can download the WHOIS Digger sources for installation on your site.