Облегчение жизни пользователю Safari на iPhone

Облегчение жизни пользователю Safari на iPhone.

В моей прошлой статье, мы разбирали, как за короткий промежуток времени возможно изготовить версию сайта, адаптированную для Apple iPhone.Сегодня я продолжаю свою статью. Сейчас мы рассмотрим некоторые мета теги (и не только), которые облегчат жизнь не только посетителю сайта, но и разработчику веб-проекта.



Все приемы, указанные в статьях, были успешно применены в одном моем проекте, так что прошу не считать за пиар, так как изображения в статье содержат фрагменты с моего сайта, это сделано для большей наглядности, а не с целью пиара .
Итак приступим.

1) Определяем устроиства с помощью user-agent (PHP).

Как же нам определить, что пользователь перешел с мобильной версии Safari, все очень просто, используем следующий код:



На примере изображено изменение моего проекта z-music.ru в соответствии с используемым устроиством.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{

//В данном условии размещаем код , предназначенный для пользователей мобильной версии Safari.

}
else{

//Тут размещаем код для остальных браузеров
}

* This source code was highlighted with Source Code Highlighter.

Если хотим, чтобы данное условие срабатывало для владельцев Android устроиств, немного изменяем условие отбора.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'Android'))

* This source code was highlighted with Source Code Highlighter.

2) Запрещаем увеличение/уменьшение страницы.

Если ваша страница оптимизирована для мобильной версии Safari (максимальная ширина страницы не привышает 320px), то Вы наверняка хотите, чтобы пользователь не смог увеличивать и уменьшать содержимое страницы (выполнять, так называемый, pinch zoom). Для такого случая у нас существует специальный мета тег.

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

* This source code was highlighted with Source Code Highlighter.

3) Показ страницы в масштабе 1:1.

Для того, что бы при загрузке пользователь сразу видел Ваш сайт в масштабе 1:1, вы можете добавить следующий тег (при этом, в отличии от предыдущего тега, возможно выполнение pinch zoom ).

<meta name = "viewport" content = "width=device-width">

* This source code was highlighted with Source Code Highlighter.

4) Превращем страницу в web-приложение.

Еще во времена первых прошивок для iPhone, до появления App Store, web-приложения были очень популярны. В чем же особенность web-приложений?
В отличие от обычных страниц web-приложения не используют оболочку safari, поэтому вы не увидите таких стандартных элементов как: адресная строка и панель навигации.

Для того чтобы браузеру стало известно, что перед ним web-приложение, необходимо добавить следующий мета тег.

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

* This source code was highlighted with Source Code Highlighter.

Для того чтобы добавить web-приложение, необходимо проделать следующую нехитрую операцию.
Зайти в Safari > нажать + на панели навигации > Выбрать " Добавить в «Домой» ".

4.1) Добавляем web-приложению загрузочное изображение.

Какое же web-приложение может обойтись без загрузочного изображения, оно необходимо для чтобы пользователь не наблюдал пустой экран, во время загрузки вашего web-приложения.
Размер изображения должен быть 320х460 пикселей.

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

* This source code was highlighted with Source Code Highlighter.

4.2) Добавляем иконку.

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

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

* This source code was highlighted with Source Code Highlighter.

4.3) Добавляем иконку без эффектов (бликов).

Для того чтобы при установке иконки отсутствовал блик (в некоторых случаях это портит внешний вид иконки), добавление тега указанного в пункте 4.2 не обязательно, достаточно того, что в корень своего сайта Вы положите изображение с именем apple-touch-icon-precomposed.png, (Важно: никакие другие названия не будут подходить, и также если картинка лежит не в корне сайта работать иконка не будет!)

4.4) Изменяем цвет статус бара web-приложения.

У статус бара также возможно изменение цвета, необходимо использовать следующий мета тег.

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

* This source code was highlighted with Source Code Highlighter.

Выглядит это следующим образом:

На этом я свою статью заканчиваю, спасибо за внимание.