Как сделать сайт более iPhone-совместимым за 5 шагов

    Тот факт, что iPhone предлагает наиболее развитый мобильный браузер среди мобильных платформ, пожалуй, ни у кого не вызовет сомнений. Однако не все знают, что довольно небольшими усилиями можно сайт сделать еще более дружественным к тем, кто смотрят его на iPhone или iPod Touch.

    Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

    Шаг 1. Аналог favicon.ico

    Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

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

    и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

    Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:



    Шаг 2. Полноэкранный режим (почти).

    Добавление вот этого тега приведет к тому, что ваш сайт, будучи запущен по иконке из SpringBoard, будет похож на отдельностоящее приложение (не будет отображаться ни строка ввода адреса / поиска, ни нижний тулбар). Останется только верхняя полоска статуса.

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

    Минусы — навигация на сайте должна быть самодостаточной, ибо на кнопки Back / Forward браузера уже полагаться не получится.

    Это вид веб-сайта, запущенного с иконки на рабочем столе. Как видите, ничего лишнего.



    Шаг 3. Адаптируем диапазон масштабирования

    Если Ваш сайт изначально отображается в iPhone не на полный экран, то вы можете подобрать начальный масштаб отображения, максимальный масштаб отображения и, при необходимости, запретить масштабирование пальцами вообще (если весь сайт при выбранном масштабе умещается на экране по горизонтали):

    <meta name="viewport" content="width=device-width; initial-scale=0.85; maximum-scale=0.85; user-scalable=0;" />

    Шаг 4. Добавляем CSS-стили, предназначенные только для iPhone

    Вот так можно подключить отдельный CSS, который будет воспринят только на iPhone:

    <link rel="stylesheet" href="res/iphone.css" media="only screen and (max-device-width: 480px)" />

    Критически оцените вид вашего сайта на iPhone и посмотрите, какие элементы навигации и контента можно увеличить, чтобы по ним легче было попадать пальцем. Какие блоки можно на iPhone вообще скрыть или уменьшить? Можно ли привести сайт к одноколоночной верстке, для которой легче подобрать масштаб? Понятно, что разработка полноценного стиля сайта под iPhone — занятие ответственное, но какие-то моменты можно подправить достаточно быстро.

    Шаг 5. Отмена автоматической коррекции масштабирования

    Если Ваш сайт использует Ajax-запросы или Javascript для динамического изменения содержимого страницы, вы можете наблюдать неприятные побочные эффекты в виде изменения масштаба текста при изменениях DOM или сворачивании/отображении некоторых элементов. Следующий кусок CSS отключит встроенную эвристику мобильного Safari и избавит от этих эффектов:

    html {
    -webkit-text-size-adjust: none;
    }


    В итоге за 15 минут работы получилось полноценное веб-приложение для iPhone:



    P.S.: теперь можно скачать исходники WHOIS Digger для установки на своем сайте.

    Similar posts

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

    More
    Ads

    Comments 38

      +2
      Ограничение на максимальное увеличение — это просто жесть в айфоне. Читать Гугл ридер можно только в горизонтальном варианте, да и то шрифт мелкий. А увеличить нельзя, блин.
      Зато теперь понятно, откуда ноги растут…
        +1
        Согласен, что шрифт там мелковат (для меня — на грани комфортного). Могли бы вынести вариант «более крупный шрифт» в настройки.
          +5
          купите ByLine ) реально хорош
            0
            Да я много рассматривал альтернатив, но ни в обдном не видел кнопки Share и кнопки Like. А без этого никак. В ByLine есть такие?
              0
              В Byline есть, и в MobileRSS, и во многих других тоже есть
                0
                Share есть, Favorite есть, Like нет
                0
                Да, Булайн потрясающ. Абсолютно полноценный гуглридер-клиент. Единственное, что не может — новиночки вроде камментов.

                А так — оно даже умеет кешировать статьи (а при желании пользователя и стоящие за ними страницы), пока чует вайфай.
                  0
                  каменты есть (или это не то же самое, что Note?)
                    0
                    Вот ноут есть, а камментов нет.
                    Это немножко разные вещи, камменты появились недавно.
              –3
              Про второй пункт я б вот что сказал:
              Какого хе*а кто-то смеет ограничивать мою свободу и скрывать строку адреса и кнопки? Бесит, когда у тебя что-то отнимают. Я бы негодовал по этому поводу :(
                –2
                А еще, как мне кажется, отныне особо «усердные» заказчики будут просить делать еще одну верстку для iPhone… бедные верстальщики :)
                  +15
                  Почему бедные? Заказчику надо — заказчик платит. Кто откажется от лишней работы :)

                  Тем более что под iPhone адаптировать сайт приятнее, чем писать хаки вокруг багов ослика.
                  • UFO just landed and posted this here
                      0
                      Согласен, для меня опыт вёрстки под айфон был бы интересным экспириенсом.
                    +3
                    Это происходит только в том случае, когда вы выносите иконку сайта на рабочий стол и открываете сайт как отдельное приложение. Т.е. аналог Prism в Mozilla или «Создать ярлики приложения» в Chrome.

                    Когда же вы заходите на такой сайт в сафари, то там вся обвязка остается. Т.е. в этом случае пользователь может выбирать, хочет он лицезреть тулбары при работе с сайтом или нет.
                      +2
                      То есть закладка в браузере и иконка в спрингбоард это не одно и тоже?
                      Простите, просто пока еще не имею сей чудо девайс ;(
                        +2
                        нет, не одно и то же.
                        закладки есть в самом safari.
                          +1
                          Вы можете в Safari добавить закладку (будет видна только в UI Safari) и/или иконку на рабочий стол. В последнем случае можно сайт подкрутить так, чтобы он выглядел как нативное приложение (т.е. без обвязки Safari плюс своя иконка). Остальные параметры (масштабирование и стили) актуальны как при запуске из-под Safari, так и при запуске через иконку.
                            +2
                            Спасибо за объяснение, тогда это действительно полезно, в виде приложения.
                              0
                              только если на самой страничке будут ссылки на другие страницы — то при вызове на ссылку запустистя отдельный сафари и в ссылка откроется в нем уже в нормальном режиме. То есть самодостаточное веб-приложение тегом не сделать.
                              Насчет viewport для iPhone. Рекомендуется сделать ширину контента равной 320px и такую же ширину viewport. Тогда при повороте — вы получите эту же страничку полностью по ширине — но соответственно крупнее, чем в вертиклаьном состоянии. А уж отключать зум — это вообще не вариант
                        0
                        Никуда оно вроде как полностью не пропадает, а просто уходит за скролл, если не путаю.
                        +1
                        whoisdigger очевидно переживает 2-й за сегодня хабраэффект…
                          0
                          Это не второй хабраэффект, к сожалению. Буквально за несколько минут до момент публикации топика упал сам хостер. Ждемс…
                            0
                            О, поднялся.
                        • UFO just landed and posted this here
                            –7
                            Как сделать сайт, понятно. А вот как сделать iPhone более сайто- и человекосовместимым?
                              +4
                              Мало кто сможет доказать, что на его мобильном устройстве браузер лучше айфоновского.
                              МобайлСафари даст фору по стандарто- и сайтосовместимости не то что ие6, а наверное даже второму фаерфоксу и прочим браузерам того поколения.

                              Что до человекосовместимости — вопрос сугубо индивидуальный. Не нравится — никто не заставляет пользоваться, и уж тем более читать всякие статьи про оптимизацию сайта под мобайлсафари.
                              +1
                              > Вот так можно подключить отдельный CSS, который будет воспринят только на iPhone

                              Сейчас это утверждение истинно, однако в будущем оно может оказаться и не таковым: учтите, что медиазапросы (media queries) в CSS теперь поддерживаются не только Вебкитом, но и другими движками (Gecko, например). Соответственно, Fennec, запущенный на экране мобильника 480×640, будет реагировать на такой CSS ничуть не хуже, чем Safari на iPhone.

                              Этот метод, стало быть, следует использовать для адаптации сайтов не только под iPhone, но и для всякого экрана 480-пиксельной ширины.

                              По примеру сайта W3C можно при подключении CSS также использовать width (ширину документа во браузере) вместо device-width (ширины экрана) или нарядý с нею, ведь есть же известный смысл в том, чтобы в нешироком окошке отображать сайт совершенно так же, как и на нешироком экране.
                                0
                                Весьма полезный комментарий, только последний абзац немного не понял.
                              • UFO just landed and posted this here
                                  0
                                  может кто знает, как определить, что на сайт зашли с iPhone или iPod touch? Спасибо!
                                    +1
                                    User-Agent, не?
                                      0
                                      Точно, спасибо вам за совет!

                                      if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i)) {
                                         window.location.replace('.../smth_for_iphone.html');
                                      }
                                      0
                                      Вот здесь UseAgent и функция на Javascript:

                                      groups.google.com/group/iphonewebdev/browse_thread/thread/9cb7c185711ec6f0

                                      И не могу не поделиться вот этой свежей ссылкой, где перечислены примеры сайтов, оптимизированных для iPhone, а также даны ссылки на полезные инструменты для дизайнера/разработчика таких сайтов:

                                      www.smashingmagazine.com/2009/09/27/showcase-of-designs-optimized-for-iphone/
                                      0
                                      Господа верстальщики, а как вы тестируете под iPhone, помимо собственно покупки самого устройства?
                                        0
                                          0
                                          можно sdk скачать, там есть эмулятор, ну а в эмуляторе сафари. отличий от обычного(на самом iphone который) замечено не было
                                          0
                                          jQTouch рулит!

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