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.