Полная версия - Мобильная версия - Блог о создании сайтов

Администраторы некоторых проектов, где я участвую, пришли к необходимости организовать адаптив. Больше того, потребовался переключатель между мобильной и полной версией. Например, заходишь ты на сайт с малюсенького телефона находишь кнопочку "Полная версия". Кликаешь на нее - и оп! - на твоем маленьком экранчике версия для десктопа. Наоборот тоже можно. Как читатель всякой ерунды с телефона в общественном транспорте через дохлый мобильный интернет, я подтверждаю - иногда нужно переключиться на полную версию, бывает, что функционал в мобильной версии не полный =)

Специально для этой задачи я изобрела маленький трехколесный велосипед. По факту, я взяла готовый класс Mobile-Detect, который написан Şerban Ghiţă (не уверена, что правильно это на русском запишу). Для этого класса написала маленький сниппет, который смотрит на тип устройства и возвращает соответствующий чанк. Еще я научила сниппет через $_POST получать инструкцию, чтобы изменить тип устройства на нужный, и пользоваться новой информацией. Сниппет называется банально Mobile_Detect и лежит вместе с документацией на GitHub.

Итак, делаем кнопочку-переключатель.

Прежде всего, нужно организовать подключение стилевых файлов и скриптов в зависимости от устройства. Но проекте, где я использовала этот сниппет, скрипты универсальные для всех версий, а вот стилевые файлы отличаются для полной версии и "мобильного" варианта. Так что мне нужно контролировать viewport и подключение только css. Поэтому появляются два чанка.

Чанк header_full для десктопа.

<link rel="stylesheet" href="/css/style.css"/>
<meta name="viewport" content="width=1132">

Во-первых, мы подключаем css, во-вторых, устанавливаем viewport равным минимальной ширине, на которую расчитана статичная верстка сайта. Ширина странная, в основном, потому что пришлось еще учитывать плавающие элементы по бокам страницы - они не должны закрывать контент.

Чанк header_mobile для мобильных девайсов.

<link rel="stylesheet" href="/css/m_style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Здесь свой css, который содержит в том числе @media для контроля отображения на разных экранах, и здесь стандартный viewport для адаптивной верстки.

Теперь все это нужно разместить в блоке <head>.

[!Mobile_Detect? &fullTpl=`header_full` &mobileTpl=`header_mobile`!]

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

Сама кнопка будет формироваться аналогичным образом.

Для переключения на полную версию чанк version_switch_toFull.

<form action="[~[*id*]~]" method="post" id="version_switch">
	<input type="hidden" name="user_agent" value="full"/>
	<button type="submit">Полная версия</button>
</form>

Для переходя на мобильную версию чанк version_switch_toMobile.

<form action="[~[*id*]~]" method="post" id="version_switch">
	<input type="hidden" name="user_agent" value="phone"/>
	<button type="submit">Мобильная версия</button>
</form>

И вызов сниппета размещаем в том месте страницы, где нам нужна кнопка.

[!Mobile_Detect? &fullTpl=`version_switch_toMobile` &mobileTpl=`version_switch_toFull`!]

И все готово. Пользователь кликает на кнопку, которую вы вольны оформить как считаете нужным, отправляя на сервер post-запрос с параметром user_agent. Страница сайта перезагружается и формируется снова с соответствующим запросу чанку в <head>, а также измененной версией кнопки для переключения.