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

Question

После просмотра SO источник, я заметил этот тег:

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

Что после быстрого Google раскрытый элемент Apple типа «favicon» для отображения на вашей домашней странице (точнее, «Закладка WebClip»).

Единственный другой, который приходит на ум это:

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

_{(источник: alexking.org)}

Этот type="search" заставляет поле "наследовать" значок поиска Apple, а необязательный results="x" позволяет вести историю ключевых слов "x".

Поэтому мне интересно, какие еще HTML-теги и атрибуты Apple/Safari (iPhone/iPod Touch) существуют, о которых я не знаю!Пытливые умы должны знать!

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

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

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

Answer 2

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

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 размещает на значках приложений, слишком велико, вы можете отказаться от его добавления, добавив «предварительно составленный» к атрибуту 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)" />

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

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

Precomposed доступен для iPhone OS 2.0 и позже

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

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