Что такое специальные HTML-теги iPhone / iPod Touch?

Полезный тег заголовка для специализированных веб-приложений - яблоко-мобильный-веб-приложение с возможностью. Когда пользователь создает ярлык на главном экране для сайта, он запускается в «полноэкранном» режиме, отдельно от обычного приложения Mobile Safari и без строки URL или другого хрома. Если сайт красиво оформлен, он может ощущаться почти как родное приложение для iPhone.

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

Позволяет установить значения ширины, высоты и масштаба

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

Установите стиль строки состояния, довольно понятно.

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

Как упомянул Марк выше и объясняется в ссылке daringfireball.net, позволяет веб-странице работать в полноэкранном режиме, а не через сафари.

Поддерживаются и другие различные атрибуты, которые задокументированы здесь: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Оказывается, их очень много!

Мне это показалось интересным:

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

Ссылка на DaringFireball Марк поделился ссылками на руководство по веб-контенту Safari. Как упоминал Энди, вы должны зарегистрироваться для этого, но это бесплатно и легко (ну, не так просто, как OpenID, но близко).

Руководство по веб-контенту Safari

Вышеупомянутая документация перемещена. Это новые локации.

Справка по Safari HTML: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/

Руководство по веб-контенту Safari: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/

Подумал, что добавлю в свой ответ кое-что из нового, что я увидел.

1.) Есть возможность предоставить значок дисплея Retina iPhone 4 с более высоким разрешением.

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

2.) Если вы обнаружите, что глянцевый оверлей по умолчанию, который iPhone / iPod / iPad помещает на значки приложений, слишком велик, вы можете попросить не добавлять его, добавив «precomposed» к атрибуту rel.

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

3.) Вы можете сделать так, чтобы ссылки iPhone для текстовых сообщений телефона / смс выполняли желаемое действие.

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

4.) Не совсем HTML-тег, но удобный вариант для переключения CSS в зависимости от ориентации.

<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.) Вы можете предоставить специальную таблицу стилей CSS для Retina-дисплея iPhone 4, которая поддерживает в 4 раза больше пикселей, чем оригинал.

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

Спасибо @Sarah Parmenter на 24 способа за эту добавленную информацию.

@scunliffe Я продвинул ваш переключатель ориентации на шаг дальше:

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