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!

Solution 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

Solution 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:[phone]">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.

Solution 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.

Solution 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/

Solution 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;
  }
}

View more solutions