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

Question

After peeking at the SO source, I noticed this tag:

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

Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).

The only other one that jumps to mind is the:

<input type="search" results="5"/>

_{(source: alexking.org)}

This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.

I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!

Answer 1

<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

Answer 2

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.

Answer 3

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.

Answer 4

The above mentioned documentation has moved. These are the new locations.

Safari HTML Reference: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/

Safari Web Content Guide: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/

Answer 5

@scunliffe I took your orientation switch a step further:

function orient(o){
  switch(o){
    case -90:
    case 90: 
      $('#container').removeClass().addClass('landscape');
    break;
    default:
      $('#container').removeClass().addClass('portrait');
    break;
  }
}

Answer 6

It turns out, there are a lot of them!

I found this one interesting:

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.

precomposed is available to iPhone OS 2.0 and later

The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).

Safari Web Content Guide