Optimizing a Website for iPhone

iphone_website.md

This is primarily for making iPhone-only versions of an existing site/application.

Set your Viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

Use Media Queries for linking CSS files

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

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

Override text size adjustments (in your CSS)

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

Run in Full-Screen mode

If you want your site/application to run in full screen mode (and separated from the normal mobile Safari) when running from a home screen shortcut, add this meta tag:

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

Don't forget the Touch Icon

Don't forget to add a nice icon for people who bookmark your site on their home screens.

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

Sources

• Related Gist
• Daring Fireball: Meta Tag Allows Full-Screen iPhone Web Apps
• ADC: Using the Viewport Meta Tag
• ADC: Using Conditional CSS
• Safari Reference Library

This formerly lived at http://solutions.trey.cc/2008/12/01/optimizing-a-website-for-iphone/

This is a Solutions Log post.

user-scalable=no... shame on you, really!

Hi @yckart user-scalable=no dosnt work on iOS devices at all unfortunately. Not sure why it is even there?