Статьи

В моей прошлой статье говорилось о том, как за короткий промежуток времени возможно изготовить версию сайта, адаптированную для 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{
//Тут размещаем код для остальных браузеров
}


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

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


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

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

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

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

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

<meta name = “viewport” content = “width=device-width”>
<meta name = “viewport” content = “width=device-width”>


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

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

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

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




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

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

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

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


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

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

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

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

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

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

У строки состояния (status bar) также возможно изменение цвета; для этого необходимо использовать следующий мета тег.
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

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

И, разумеется, не следует упускать из виду стандарты: iPhone Human Interface Guidelines