Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Optimizing a Website for iPhone

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">



trey commented Jan 13, 2013

This is a Solutions Log post.

yckart commented Jul 3, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment