Safari

Настройка веб-приложений

Веб-приложение предназначено, для того, чтобы выглядеть и вести себя таким образом как нативное приложение, например, оно масштабируется в соответствии с экраном на iOS. Вы можете настроить ваше веб-приложение для Safari на iOS еще глубже, сделав его выглядещем как нативное приложение, когда пользователь добавляет его в Home экран. Это можно сделать с помощью параметров для iOS, которые игнорируются другими платформами.

Указание иконки веб-страницы

Возможно, вы захотите, чтобы пользователи могли добавлять ваши веб-приложения или веб-страницы в качестве ссылки на Home экран. Эти ссылки, представлены иконкой, называумой веб-клип (web clip). Следуйте следующим простым шагам, чтобы указать иконку для представления вашего веб-приложения или веб-страницы на iOS.

  • Чтобы указать значок для всего веб-сайта (каждой страницы на сайте), поместите файл иконки в формате PNG в корневую папку документов с наименованием apple-touch-icon.png или apple-touch-icon-precomposed.png. Если вы используете apple-touch-icon-precomposed.png, Safari на iOS не будет добавлять эффекты к иконке.
  • Чтобы указать значок для одной веб-страницы или заменить значок веб-сайта на конкретную иконку, добавьте элемент ссылки в веб-страницы, например:
    <link rel="apple-touch-icon" href="/custom_icon.png"/>

    В приведенном выше примере, замените custom_icon.png на имя файла вашей иконки. Если вы не хотите, чтобы Safari на iOS добавил эффекты к иконке, замените apple-touch-icon на apple-touch-icon-precomposed.

  • Чтобы указать несколько иконок для различных устройств с различным разрешением, например, поддерживаемых как iPhone, так и iPad, добавьте атрибут sizes к каждому элементу link следующим образом:
    <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

    Иконка, которая является наиболее подходящей по размерам для используемого устройства. Если атрибут size не установлен, то размер элемента по умолчанию 57 х 57.

Если нет значка, соответствующего рекомендуемому размеру для устройства, используется самый маленький значок больший, чем рекомендуемый размер. Если нет значков больше рекомендуемого размера, используется крупнейший значок. Если несколько значков подходят, то выбирается значок, который использует ключевое слово precomposed.

Если значки не задаются с помощью элемента link, в кореневом каталоге веб-сайта ищется иконка apple-touch-icon... или apple-touch-icon-precomposed.... Например, если соответствующий размер иконки устройства составляет 57 х 57, система производит поиск файлов в следующем порядке:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png
 

Указание изображения заставки

iOS Примечание: Указание изображения заставки доступно начиная с iOS 3.0.

Для iOS веб-приложений, которые похожи на нативные приложения, можно указать изображение запуска, которое отображается в то время, когда ваше веб-приложение запускается. Это особенно полезно, когда ваше веб-приложение находится в автономном режиме. По умолчанию оно представляет собой скриншот веб-приложения при последнем запуске. Для установки другого изображения заставки добавьте элемент link в веб-страницу, например:

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

На iPhone и iPod Touch, изображение должно быть 320 х 460 пикселей и в портретной ориентации.

Скрытие Safari компонентов интерфейса пользователя

iOS в рамках оптимизации вашего веб-приложения, может его использовать в режиме автономной работы, чтобы больше походить на нативное приложение. При использовании его автономном режиме, Safari не используется для отображения веб-контента, в частности, нет текстового поля URL браузера в верхней части экрана или панели кнопок в нижней части экрана. Появляется только строка состояния в верхней части экрана.

Установите apple-mobile-web-app-capable мета-тег в yes, чтобы включить автономный режим. Например, следующий HTML отображает веб-контент с помощью автономного режима.

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

Вы можете определить, отображается ли веб-страница в автономном режиме с помощью логического свойства JavaScript window.navigator.standalone (только для чтения).

Изменение внешнего вида строки состояния

Если ваше веб-приложение отображается в автономном режиме, как нативное приложение, вы можете уменьшить строку состояния, которая отображается в верхней части экрана на iOS. Сделайте это, используя мета-тег apple-mobile-web-app-status-bar-style.

Этот мета-тег не имеет никакого эффекта, если вы сначала не указали автономный режим, как описано в "Скрытие Safari компонентов интерфейса пользователя.", Затем используйте мета-тег, apple-mobile-web-app-status-bar-style, чтобы изменить внешний вид строки состояния в зависимости от потребностей приложения. Если вы хотите использовать весь экран, установите стиль строки состояния.

Например, следующий HTML устанавливает цвет фона строки состояния в черный:

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

Ссылки на другие нативные приложения

Веб-приложение можно связать с другими встроенными приложениями iOS, создав ссылку со специальным URL. Доступные функции: звонок по телефонному номеру, отправка SMS или iMessage, и открытие видео YouTube в своем нативном приложении, если оно установлено. Например, для ссылки на номер телефона, структура элемента привязки в следующем формате:

<a href="tel:1-408-555-5555">Call me</a>
 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac