What are all the special iPhone / iPod Touch HTML tags?

Thought I'd add my own answer with some new things I've seen crop up.

1.) There's an option for providing a higher definition iPhone 4 retina display icon

<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>

2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.

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

3.) You can make iPhone links for phone/sms texting directly do the desired action

<a href="tel:01234567890">Call us</a>
<a href="sms:01234567890">Text us</a>

4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation

<script type="text/javascript">
  function orient(){
    switch(window.orientation){
      case 0:
        document.getElementById("orient_css").href = "css/iphone_portrait.css";
        break;
      case -90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
      case 90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
    }
  }
  window.onload = orient();
</script>

5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.

<link rel="stylesheet" type="text/css" href="../iphone4.css"
   media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

Thanks to @Sarah Parmenter over on 24 ways for this added information.


A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.


<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

Allows you to set the width, height and scale values

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

Set the status bar style, pretty self explanatory.

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

As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.

There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html