З кожним роком зростає число людей, які активно використовують мобільний інтернет на своїх смартфонах. А дисплей смартфона сильно відрізняється від монітора стаціонарного ПК або ноутбука в плані розміру, дозволи та орієнтації. Відповідно, при перегляді одного і того ж веб-сайту з ПК і смартфона людина буде бачити дві різні картини. У першому випадку це буде красиво оформлена і коректно що відображається сторінка. У другому випадку - сторінка з надто дрібним шрифтом і з'їхав в сторону окремими блоками. Однак останнім часом вебмастера все частіше піклуються про адаптацію своїх сайтів під мобільні браузери, так як це дозволить утримати на сторінках ресурсу «мобільний» трафік.
В першу чергу, мова йде про коректне заповнення тега 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" />.
