Оптимизация сайта под мобильные браузеры — полезные плагины и приемы

С каждым годом растет число людей, активно использующих мобильный интернет на своих смартфонах. А дисплей смартфона сильно отличается от монитора стационарного ПК или ноутбука в плане размера, разрешения и ориентации. Соответственно, при просмотре одного и того же веб-сайта с ПК и смартфона человек будет видеть две разные картины. В первом случае это будет красиво оформленная и корректно отображающаяся страница. Во втором случае – страница с чересчур мелким шрифтом и съехавшими в сторону отдельными блоками. Однако в последнее время вебмастера все чаще заботятся об адаптации своих сайтов под мобильные браузеры, так как это позволит удержать на страницах ресурса «мобильный» трафик.

В первую очередь, речь идет о корректном заполнении тега meta viewport. Он прописывается в том же месте, где находятся другие мета-теги страницы (title, description) – в хедере. Основное предназначение meta viewport – регуляция ширины и масштаба страницы при ее отображении в браузере. Регулирование этих параметров происходит в зависимости от того, каким дисплеем (по ширине и разрешению) обладает устройство. Вот пример кода с использованием мета-тега meta viewport — <meta name=»viewport» content=»width=device-width; initial-scale=1.0; maximum-scale=1.0;»>. Пройдемся по параметрам. Параметру width (ширина показываемой области) присваивается значение device-width (ширина дисплея устройства). Параметру initial-scale (начальный масштаб) присваивается значение 1 (то есть 100%). Параметру maximum-scale (максимальный масштаб) тоже присваивается значение 1. Другими словами, задается фиксированный масштаб при просмотре. Содержимое тега meta viewport можно прописывать напрямую в каскадных таблицах стилей.

Также для разработки адаптивного дизайна можно использовать спецификацию CSS3 под названием Media Queries. Вставляется она очень легко – напрямую в HTML-код страницы. К примеру, <link href=»style.css» rel=»stylesheet» media=»screen and (orientation: portrait) and (min-width: 1000px), projection» />. При помощи данной спецификации можно прописывать отдельные блоки с CSS-правилами для дисплеев с определенным разрешением или ориентацией (книжной или альбомной). В зависимости от характеристик дисплея, в силу будет вступать тот или иной блок. Параметр orientation, как вы поняли, задает ориентацию. Параметр min-width – это минимальная ширина дисплея (если он обладает шириной, большей, чем та, которая указана здесь, то в силу вступят определенные CSS-правила).

Следующий инструмент, о котором нужно рассказать – Modernizr. Это специальный скрипт, основная задача которого – определять, поддерживает ли браузер пользователя новые стандарты HTML5 и CSS3. Если поддержка данных стандартов отсутствует, то в браузер загрузится упрощенная и облегченная версия сайта. В противном случае будет загружаться полная версия (со всем функционалом и со всеми эффектами). Скачать можно отсюда — http://modernizr.com.

При помощи jQuery-плагина под названием TouchSwipe можно сделать свой сайт еще более приспособленным к сенсорному управлению. После корректной установки плагина страницы вашего ресурса без труда будут распознавать все основные жесты пальцев рук (и соответствующим образом на них реагировать). К примеру, плагин поддерживает распознание таких жестов, как swap, tap, pinch, zoom, multi touch и т.д. Скачать можно отсюда — http://labs.rampinteractive.co.uk/touchSwipe/demos.

Можно даже сделать так, чтобы при добавлении страницы сайта на домашний экран устройства появлялась специальная иконка в стиле iOS (пользователи айфонов и айпадов наверняка это оценят). Для создания иконки следует заранее подготовить три картинки – для iPhone, iPad и iPhone Retina. Назовите картинки следующим образом — touch-icon-iphone.png, touch-icon-iphone-retina.png и touch-icon-ipad.png. Далее загрузите их в корневую директорию сайта. В хедере нужно прописать следующий код:

<link href=»touch-icon-iphone.png» rel=»apple-touch-icon» />

<link href=»touch-icon-ipad.png» rel=»apple-touch-icon» sizes=»72×72″ />

<link href=»touch-icon-iphone-retina.png» rel=»apple-touch-icon» sizes=»114×114″ />.