Облегчение жизни пользователю 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.


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

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

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 43

      –1
      Спасибо за статью, вполне реализуемо, главное что быстро и универсально
        0
        На страницы с такой адаптацией лучше отдельные ссылки давать как на версию для IPhone или оно и на компьютерных браузерах хорошо смотрится?
          0
          Какая разница, в обычные компьютерные браузеры автоматически грузится версия без адаптации.

          А вот другие недостатки отсутствия адресного разделения между версиями, наверняка, есть (тут чуть подумать надо).
          0
          Андроид?
          if(strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod') || strstr($_SERVER['HTTP_USER_AGENT'], 'Android'))
            +1
            Не увидел, простите
          0
          Интересно, спасибо!
            0
            можно еще упомянть о «black-translucent» значении для apple-mobile-web-app-status-bar-style
              0
              iPhone зарядить бы :-)
                0
                Страницы в масштабе 1:1 заряжают iPhone на 5%, а чёрный статусбар вместо обычного отнимает 2%. Если буду верстать сайты под айфон, учту :)
                  0
                  Все верно, правда при отключенном вай фай, в режиме черного статусбара отнимается не 2 а 1% зарядки =)
                0
                «это сделано для большей наглядности, а не с целью пиара .»

                отрицание пиара — тоже пиар)

                а за статью спасибо!
                  0
                  тоже верно, хотя это не было основной целью. просто подходящих иллюстраций для статьи не было под рукой.
                  0
                  А вот на второстепенных страницах появляется кнопка домой, это автоматом?
                  +1
                  Вообще-то строка

                  <meta content=«width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;» name=«viewport» />


                  Делает и 2) и 3) пункты одновременно и просто.
                    0
                    второй пункт делает все вместе. а третий, как я писал «при этом, в отличии от предыдущего тега, возможно выполнение pinch zoom».
                    +1
                    По стандарту браузер автоматически добавляет скругленный блик иконке, о том, как убрать блики написано ниже.


                    Никакого стандарта нету что блики добавляются, просто по умолчанию так делается.
                    +2
                    — Почему у Вас в лендскейп режиме все так страшно увеличивается в масштабе?
                    — Глюки в названиях длинных песен — строки друг-на-друга вылазят
                    — Длинный хедер залазит под кнопку Домой
                    — зачем такое большое Лого? и так экрана не хватает
                    — аяксик бы… и слайдинг экранов, как в нативных приложениях…

                    — на основном сайте строка «Сделано с любовью и в соответствии с стандартами W3C | XHTML CSSРезиденция Повелителя Желе jele@z-music.ru» — врет :)
                      0
                      Сайт еще в периоде тестирования и доработки, постепенно все профиксим, спасибо за критику!
                        +1
                        Пожалуйста.
                      +3
                      Спасибо за статью, но, просмотрев несколько таких вот адаптированных сайтов, мне совершенно не хочется на них заходить. Причина простая, сайты адаптированы для iPhone только поверхностно, при все этом, базовые и привычные элементы интерфейса iPhone используются в большинстве своем совершенно не по их прямому назначению. Для меня, например, как для обычного пользователя, сразу теряется авторитет и доверие к сайту, создается впечатление, что он некачественный. Нужно следовать требованиям и рекоммендациям по интерфейсу от apple — iPhone Human Interface Guidelines и другим…
                        +1
                        До этого не был ознакомлен с iPhone Human Interface Guidelines, после ознакомления многие ошибки, думаю исправлю
                        +2
                        Как я понял, вы загрузочное изображение используете как сплэш-скрин, но это противоречит с гидлайнами IPhone Human interface:
                        It’s important to emphasize that the reason to supply a launch image is to improve user experience; it is not an opportunity to provide:
                        An “application entry experience,” such as a splash screen
                        ...

                        Назначение этого изображения — сокращение восприятия времени загрузки приложения, оно должно быть максимально неброским. У вас получилось скорее наоборот.

                        Launch Images — из iPhone Human interface guidelines
                          0
                          Хм, спасибо за ссылку, я ознакомлюсь
                          0
                          Отличная статья! Спасибо! В избранное!
                            0
                            то что показали людям фишки сафари это хорошо
                            но это называется не «облегчение жизни пользователей safari»
                            все это и много чего другого интересного задокументировано на страничке Центра Разработки
                            developer.apple.com/safari/library/navigation/index.html

                            А также демо developer.apple.com/safari/library/navigation/index.html#section=Resource+Types&topic=Sample+Code
                              –1
                              jQTouch делает _все_ это автоматически.
                                0
                                На android 1.5 ваш сайт z-music как работал коряво так и работает. Между тем как demo.iwebkit.net работает отлично.
                                  0
                                  Все эти сведения и раньше встречались во блогосфере, но вот наконец они систематизированы и кратко, и чётко.
                                    0
                                    Не сталкивались с проблемой, что ссылки (даже внутренние, по сайту) почему-то открываются в Safari?..
                                      0
                                      Только на ссылки которые вели на медиа файлы. покажите сайт с такой проблемой
                                        0
                                        www.mobilesentry.net/ с айфона.
                                        Добавляю на рабочий стол, появляется иконочка, все красиво.

                                        Логинюсь, к примеру с мылом «aldekein@myevil.info» и паролем «a» (английская буква а).

                                        Потом нажать на logout (
                                        <a href="?logout=true">logout</a>
                                        )… Открывается Safari.
                                          0
                                          Перерыл пол свйта и наконец-то понял.
                                          <script src="/js/functions_iphone.js" type="text/javascript"></script>

                                          * This source code was highlighted with Source Code Highlighter.


                                          в раздел Head добавьте, сам фаил можно взять у меня на сайте
                                          z-music.ru/js/functions_iphone.js

                                          проблем с открытием сафари больше не будет
                                            0
                                            Добавил, помогло!
                                            Спасибо огромное! =)
                                              0
                                              А сделать так, чтобы медиафайлы (аудио-поток) открывались в том же «приложении», без запуска сафари возможно?
                                                0
                                                И ещё вопрос — можно ли сделать так, чтобы приложение запоминало своё состояние, а не загружалось заново каждый раз после открытия?
                                        • UFO just landed and posted this here
                                            0
                                            Скажите, а можно делать приложения на html+js для распространения через AppStore?
                                            Или для этого нужно обязательно создавать приложение-заглушку, которое отображает все через компонент браузера?
                                            Слышал, есть какой-то фреймворк для конвертирования html+js в iPhone applicaton.
                                            Буду благодарен за любую информацию / ссылки кроме гугла :)
                                              0
                                              Нашел вот какой-то phoneGap, но пока детально не разбирался, что он собой представляет
                                              0
                                              Добавлю лишь, что сейчас при определении «iphone — не iphone» нужно помнить, что есть Opera под iphone, которая возвращает следующее:

                                              $_SERVER['HTTP_USER_AGENT'] =
                                              Opera/9.80 (iPhone; Opera Mini/5.0.019802/20.2463; U; en) Presto/2.5.25

                                              iPhone тот же, браузер другой.
                                                0
                                                Вопрос немного не по теме:
                                                Наличие стрелочки справа у ссылок — это общие рекомендации по оформлению или автоматическое действие? Подскажите в каком направлении копать.

                                                Only users with full accounts can post comments. Log in, please.