Вкратце о ReView.js
Инструмент ReView (сокращение от Responsive Viewport, что означает «адаптивное окно просмотра»), предназначен для того, чтобы позволить пользователям мобильных устройств самостоятельно изменять разметку с мобильной на предназначенную для настольных ПК. Часто мобильная ограничена не только с точки зрения различных виджетов и инструментов на странице, но также и с точки зрения контента ввиду того, что экран мобильного устройства не может предоставить необходимое пространство, где уместилась бы вся нужная информация. При помощи ReView.js пользователь может свободно решать, использовать ему мобильную версию или же полную. Обращая внимание на стремительно растущий рынок Android-устройств с таким разнообразием размеров и разрешений экранов, это решение можно называть самым оптимальным.
Интегрируем ReView.js
ReView.js не зависит от каких-либо сторонних платформ вроде jQuery или MooTools. Для того чтобы разрешить ручное переключение, мы интегрируем javascript в головную секцию веб-сайта, сразу после определения окна просмотра:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
<script type="text/javascript" src="ReView.js"></script>Готово. Теперь мы можем определить ссылку для функции переключения в любой области тела нашего HTML-документа. Нам нужно задать этой ссылке класс review для того, чтобы позволить ReView.js обнаружить ее и обработать:
<a class="reView" href="/">ReView</a>Если вы используете настольный ПК, то никогда не заметите, используется ли на сайте ReView, так как инструмент отображает переключатель только мобильным устройствам. Пользователи мобильных устройств увидят ссылку под названием Default View (Стандартный вид). После переключения режима настольного стола (то есть стандартного вида), ссылка изменится на Core View (Мобильная версия). Причем изменение в разметке производятся без перезагрузки страницы.
Если вам не нравятся исходные названия ссылок, то вам не нужно иметь глубоких навыков в разработке кода, чтобы изменить дата-атрибуты в HTML5:
<a class="reView" data-defaultText="Mobile Layout" data-coreText="Desktop Layout" href="/">ReView</a>Вывод: с помощью ReView.js вы позволяете вашим посетителям решать, хотят ли они использовать стандартный режим или переключиться на мобильный. Вряд ли здесь кто-то запутается, так как пользователи мобильных устройств по умолчанию всегда будут видеть мобильную версию сайта. В целом, у данного инструмента сложно найти отрицательные стороны, так почему бы не попробовать на собственном сайте?
