Каковы все специальные HTML-теги iPhone / iPod Touch? - PullRequest
Новая
       15

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

18 голосов
/ 22 декабря 2008

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

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

Который после быстрого Google обнаружил вещь типа Apple "favicon" для отображения на домашней странице (точнее, "Закладка WebClip").

Единственное, что приходит на ум : 

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

alt text
(источник: alexking.org )

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

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

Ответы [ 6 ]

17 голосов
/ 23 декабря 2008 
<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

9 голосов
/ 01 января 2011

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

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 для текстовых сообщений телефона / смс напрямую, выполнив нужное действие 

<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 пути за эту дополнительную информацию.

4 голосов
/ 23 декабря 2008

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

3 голосов
/ 16 сентября 2009

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

Safari HTML Reference: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/

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

2 голосов
/ 15 марта 2011

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

function orient(o){
  switch(o){
    case -90:
    case 90: 
      $('#container').removeClass().addClass('landscape');
    break;
    default:
      $('#container').removeClass().addClass('portrait');
    break;
  }
}
1 голос
/ 01 января 2009

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

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

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

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

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

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

...