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

К разработке мобильной версии сайта можно подойти по-разному: создать отдельный стиль или полностью переработать дизайн и 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
Share post

Comments 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 но статья все равно в закладках, спасибо)

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