17 февраля 2011 в 15:29

Подключение мобильной версии сайта из песочницы

К разработке мобильной версии сайта можно подойти по-разному: создать отдельный стиль или полностью переработать дизайн и html-разметку. Но в обоих случаях важно определить, когда загружать мобильную версию сайта, а когда – компьютерную. Это можно сделать несколькими способами.


1. На стороне сервера


На основе анализа информации о браузере (строка User-agent), посылаемой серверу в http-запросе, либо подключать стиль для мобильной версии, либо перенаправлять пользователя на доменное имя, соответствующее мобильной версии сайта.

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

Пример meta.txt файла для сайта example.com (адрес файла в таком случае — example.com/meta.txt):

name:example.com
description: example.com is a widely used example website
keywords: example, demo, demonstration
pc: http://www.example.com
mobile: http://m.example.com
rss:http://rss.example.com/rss/topstories.xml
rss:http://rss.example.com/rss/politics.xml
podcast: http://rss.example.com/podcasting/news.xml
video: http://rss.example.com/rss/tutorial.xml
longitude:12.3456789
latitude:98.7654321
region:MM

Точки входа для компьютерной и мобильной версий определяются в строчках pc и mobile соответственно.

Минусы:
  • новые браузеры появляются очень часто, соответственно пополнять список UserAgent придется постоянно;
  • далеко не всегда UserAgent определяется правильно.


2. На стороне клиента



а) Указывать атрибут media

<link rel="stylesheet" href="site.css" media="screen" /><br><link rel="stylesheet" href="mobile.css" media="handheld"/>


Значение «screen» соотвествует обычному компьютеру, «handheld» — это мобильное устройство.

Минусы:
  • иногда загружаются оба файла стилей (и screen и handheld);
  • не поддерживается многими современными устройствами.


б) Использовать запросы внутри атрибута media

Чаще всего стили загружаются в зависимости от ширины устройства:

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


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

Минус: не поддерживаются многими старыми устройствами.

в) Комбинирование методов

Так как оба вышеописанных способа не поддерживаются рядом устройств, умные люди придумали комбинировать их:

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


3. Выбор пользователя


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

Заключение


Если мобильная версия сайта отличается от компьютерной только стилями, то подходят все вышеописанные варианты. Если же html-разметка для мобильной версии отличается от компьютерной, то 2 способ не является решением.

Данный пост основывается на статье: How To Build A Mobile Website

Полезные материалы по теме


media queries — W3C рекомендации по использованию media запросов
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website — статья про media запросы в мобильной верстке
metaTXT: A Standard for Improving Mobile Web Browsing and Discovery of Media — подробная информация об использовании meta.txt
User Agent — wiki-статья про User Agent
@positivecrash
карма
8,0
рейтинг 0,0
Самое читаемое Разработка

Комментарии (36)

  • +6
    >новые браузеры появляются очень часто, соответственно пополнять список UserAgent придется постоянно;

    api.yandex.ru/detector/ в помощь.
    • +1
      лучше уж тогда TerraWurfl

    • 0
      или DeviceAtlas, но он платный
  • 0
    headjs.com/ в помощь ==)
  • +1
    можно по useragent'у

    • +1
      можно по useragent'у задать производителей мобильных устройств, это вполне достаточно
      Noki|Eric|SAMS|Mini|Mobi|SymbOS|iPhone|HTC

      однако нужно еще смотреть HTTP_ACCEPT, т.к. некоторые моб. баузеры могут не поддерживать теже jpg'и…
      • +1
        если мобильный броузер не поддерживает даже джпеги, то вся статья не про него.

        на такие броузеры морочиться не стоит их осталось менее 1%
        • 0
          Да?

          • 0
            Да?

            Mozilla/5.0 (Linux; U; Android 2.1-update1; ru-ru; HTC_Wildfire_A3333 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 *** application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5,application/youtube-client
            • 0
              вы хотите сказать, что современный аппарат с броузером А или B класса может не поддерживать jpg?

              ой сомневаюсь
              • 0
                ну если оперу мобайл поставить, то поддерживает.
                для меня самого это было открытием.

                я уж молчу про wml, который в популярном iPhone не знают…
                • 0
                  ну отсутствие вмл это уже нормально

                  deviceatlas.com/devices/HTC+Corporation/HTC+Wildfire/entry/1995593
                  Markup WML1 False
                  Image Gif87 True
                  Image GIF89A True
                  Image JPG True
                  Image PNG True

                  по базе Атласа поддерживает.
                • 0
                  У меня Wildfire уже 4 месяца. Все он поддерживает. Может имелись ввиду не jpeg, а jpeg 2000? Про них не знаю.
                • 0
                  результаты изысканий по базе Атласа
                  site:deviceatlas.com «Image JPG false»

                  по базе получается всего 52 модели
                  все древние

                  т.е. мои предположения верны
        • 0
          Откуда такая статистика?
          • 0
            с воздуха
            счас посмотрел на свою старую статью по классам мобильных броузеров.

            Если предполагать что броузеры классов D и F могут не иметь поддержку jpg, то не более 10% на сайтах ориентированных на мобильную аудиторию.

            Реально еще меньше, так как часть таких броузеров точно поддерживает jpg.

            надо посмотреть есть ли данные по поддержке джпега в wurfl. Аж самому интересно.
            • 0
              Понятно, хотелось иметь по больше точности.
              • 0
                точности не будет, да и не может быть. Как оценивать эту цифру?
                Ведь она сильно зависит от направленности и аудитории сайта.

                На сайте с приложениями для Айфона эта цифра окажется равной 0.

                На сайтах которые указывал менее 10%, это сайты типа fank.ru, sotik.ru, siza.us. Ориентированы на мобильные. Поэтому 10% это максимально возможная цифра.

                Судя по тем моделям которые я нашел в базе Atlas это все броузеры F класса. Можно конечно поставить логгирование, разработка под такие сайты моя специфика и я могу собрать статистику по 4-5 сайтам с хорошей посещаемостью.

                Но не вижу смысла телодвижений. Нет разницы 5% броузеров или 1.12%.
  • 0
    Для django использую эту вещицу: http://code.google.com/p/minidetector/
  • 0
    Кстати, об user-agents, вот ссылка: http://www.zytrax.com/tech/web/mobile_ids.html, в ней содержатся user-agents многих устройств.
  • 0
    Ещё можно заголовок x-wap-profile (profile) анализировать. Ну и отдельно iPhone по user-agent-у.
  • 0
    И следование этого вопроса привело на довольно интересное решение www.idelfuschini.it/en/apache-mobile-filter-v2x.html. Аналогичное искал давно, нужно пробывать.
    • 0
      использует всю ту же wurfl
      но любопытно.
      • 0
        Ее используют как понял практически все в ядре и предоставляют свою обертку.
  • 0
    Я может чего-то упустил. А чем не устраивает Яндекс.Детектор — api.yandex.ru/detector/
    • +1
      хотя бы потому что это лишний запрос к чужому сайту
  • 0
    Пришла к выводу, что не хочется обращаться каждый раз к стороннему серверу…
    Нашла в сети пару функций для определения агента:
    www.manhunter.ru/webmaster/272_opredelenie_mobilnih_brauzerov_na_php.html
    mobiforge.com/developing/story/lightweight-device-detection-php

    Было бы интересно узнать, что вы об этом думаете
    • +1
      Гарантия не 100%, т.к заголовок wap многие мобильные браузеры не посылают, а по второй ссылке как wap можно определить не мобильное устройство
  • 0
    Автору — не раскрыта тема определение браузера через PHP-обработчики))
    • 0
      Не понял а каким боком к статье программирование, в частности РНР.
      • 0
        Ну, я может не прав, но если уж говорить о том, как определить какую версию css-файла загружать, стоит сказать и о программных методах определения
        • +1
          В таком варианте нужно также рассказать как это сделать на Perl, Ruby, Java, Python. Веб не только на ПХП писан. Статья описывает определенный сегмент большого вопроса, и это автору удалось.
  • 0
    А если javascript'ом?
    <script type="text/javascript">
    if((screen.height*screen.width)/1000<520) location.href = "http://m.example.com";
    </script>
    
    • 0
      думаю, когда речь идет об определении типа устройства, то не стоит завязываться на js, потому что все же есть вероятность, что js не включен (хотя, конечно, с каждым годом все меньше).

      на данный момент я больше склоняюсь к media queries: определяешь несколько контрольных точек и подключаешь для них соответствующие стили
      • 0
        хотя, конечно, с каждым годом все меньше

        пожалуй, что с каждым днем )))

        кстати, можно делать обратную проверку — то есть мобильная версия по умолчанию, а нормальная по «решению» JS. Тогда упрощенную версию получат не только владельцы маленьких экранов (в нашем контексте — мобильных устройств), но и параноики/пенсионеры/малоимущие* — все те, у кого js не включен, что тоже может оказаться полезным.

        если я правильно понимаю media queries как подключение разных стилей… (может это нечто большее?? не курил пока внимательно и растолковывать не прошу — всему свое время — просто предупредил о слабой компетентности)… то я вижу проблему использования атрибута media вовсе не в том, что это не везде работает (нет ничего, что работает везде): имхо для по-настоящему мобильной версии не достаточно только переделки интерфейса — нужно оптимизировать по весу, использовать другой — более ограниченный набор элементов… то есть все же предлагать принципиально другую версию ресурса.

        *извиняюсь у перечисленных граждан за кажущуюся интоллерантность
        • 0
          p.s но статья все равно в закладках, спасибо)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.