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

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