К разработке мобильной версии сайта можно подойти по-разному: создать отдельный стиль или полностью переработать дизайн и html-разметку. Но в обоих случаях важно определить, когда загружать мобильную версию сайта, а когда – компьютерную. Это можно сделать несколькими способами.
На основе анализа информации о браузере (строка User-agent), посылаемой серверу в http-запросе, либо подключать стиль для мобильной версии, либо перенаправлять пользователя на доменное имя, соответствующее мобильной версии сайта.
В случае, когда мобильная версия расположена на отдельном доменном имени, можно использовать файл meta.txt. В нем указываются точки входа для мобильной и компьютерной версий.
Пример meta.txt файла для сайта example.com (адрес файла в таком случае — example.com/meta.txt):
Точки входа для компьютерной и мобильной версий определяются в строчках pc и mobile соответственно.
Минусы:
а) Указывать атрибут media
Значение «screen» соотвествует обычному компьютеру, «handheld» — это мобильное устройство.
Минусы:
б) Использовать запросы внутри атрибута media
Чаще всего стили загружаются в зависимости от ширины устройства:
Вообще с помощью таких запросов можно много чего определить: ширину и высоту окна браузера или устройства, ориентацию (портретная или ландшафтная), разрешение и т.п.
Минус: не поддерживаются многими старыми устройствами.
в) Комбинирование методов
Так как оба вышеописанных способа не поддерживаются рядом устройств, умные люди придумали комбинировать их:
Можно предоставить право выбора пользователю и ничего не определять, а просто сделать ссылку на мобильную версию сайта.
Если мобильная версия сайта отличается от компьютерной только стилями, то подходят все вышеописанные варианты. Если же 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
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