Каковы все специальные тэги iPhone/iPod Touch?

Ответ 1

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

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

Существуют и другие различные атрибуты, которые поддерживаются и документируются здесь: https://developer.apple.com/webapps/docs/.../SafariHTMLRef/SafariHTMLRef.pdf
(требуется доступ к доступу Apple Developer Connection для просмотра)

Ответ 2

Думал, что добавлю свой собственный ответ с некоторыми новыми вещами, которые я видел, появляется.

1.) Там есть опция для отображения значка дисплея сетчатки с высоким разрешением 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 для текстовых сообщений телефона /sms, непосредственно выполнить желаемое действие

<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 для отображения сетчатки 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 способа для этой дополнительной информации.

Ответ 3

Полезным тегом заголовка для одноцелевых webapps является apple-mobile-web-app-able. Когда пользователь создает ярлык для главного экрана для сайта, он запускается в режиме "полноэкранный", отдельно от обычного приложения Mobile Safari и без строки URL или другого хрома. Если сайт хорошо спроектирован, он может чувствовать себя почти как родное приложение для iPhone.

Ответ 4

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

Ссылка на Safari HTML: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf

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

Ответ 5

@scunliffe Я сделал шаг вперед:

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

Ответ 6

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

Я нашел это интересным:

Чтобы указать значок для всего веб-сайт (каждая страница на веб-сайте), поместите файл значка в формате PNG в папка корневого документа, называемая apple-touch-icon.png или яблоко-сенсорный значок-precomposed.png. Если ты используешь apple-touch-icon-precomposed.png как имя файла, Safari на iPhone не будет добавьте любые эффекты к значку.

precomposed доступен для iPhone OS 2.0 и более поздние версии

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

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