Адаптивна верстка для мобільних пристроїв - Студія Палича
В інтернеті можна знайти безліч статей, присвячених адаптивній верстці. Але фактично вони б'ють один одного загальні слова, а конкретики ніякої. Так сталося, що треба було згорнути для замовника адаптивну верстку для мобільних пристроїв.
Взяв верстку з ходу. Верстав усе у відсотках. Але при відображенні в мобільному пристрої (Android та IOs) верстка виглядала трохи дивно. Найбільше дратував невеликий розмір тексту для абзаців. Звідси виникла ідея написання цієї поради. Отже, розберемо все частинами і знайдемо найоптимальніше рішення, щоб не виглядало як «на милицях».
Отже, для верстки нам знадобляться такі елементи:
- Загальне розуміння дозволів мобільних пристроїв.
- Завдання розміруviewport.
- Javascript.
- СSS таMediaQuery.
Загальне розуміння дозволів мобільних пристроїв
Так, це саме так. Яндекс видає нам безліч варіантів. Стає ясно, що дозволів дуже багато. Верстати під всі дозволи немає можливості.
Майже всі браузери, які є на мобільних пристроях, можуть використовувати ресайз сторінок. Ресайз роблять на основі технічних даних, одержуваних від пристрою. Їх три:
- devicePixelRatio
- screen.width
- screen.height
Ці три параметри можуть дати нам море інформації. Пишемо просту функцію:
Наприклад на Iphone ми побачимо "2320568640 1136", на айпад "2768 1024 1536 2048". Lenovo P780 повідомить "1,5360640540960". Тобто. ширини екранів у цих пристроїв будуть 640, 1536, 540 пікселів відповідно. Робимо висновки: нам треба зробити версію для екранів, наприклад, менше 986 пікселів(Стандарт для вузьких моніторів). Образно кажучи, буде дві верстки. Одна для екранів з роздільною здатністю більше 986 пікселів, інша для менших. Особливості CSS-верстки будуть описані в останньому розділі.
Завдання розміру viewport
Про viewport можна знайти у пошуку багато сміття. Майже скрізь йде ширвжиток без пояснення логіки. Насправді тут все дуже просто:
Вьюпорт (viewport) – це видима частина вікна браузера (мобільного чи десктопного).
Розмір в'юпорту можна змінювати, використовуючи наступну конструкцію в head:
Для верстки використовуємо лише два параметриwidth таuser-scalable. Першим задаємо розмір видимої частини, другий дозволяє її збільшувати (застосовувати zoom).
У нашому випадку ми задаємо розмір 600 пікселів і таким чином верстаємо макет шириною 600 пікселів. Тестування методу на 5 пристроях (звичайно це далеко не показник) дало позитивний результат. Детальніше про vieport можна прочитати у статті «Адаптація сайту на мобільних пристроях».
Javascript в адаптивній верстці
Отже, ви визначилися із в'юпортом, і ми можемо визначити розмір екрану. Тепер говоримо пристроям із маленькими екранами, що треба зробити в'юпорт фіксованим. Робимо так:
Тепер усі браузери, крім треклятої OperaMini, відображають сайт шириною 600 пікселів із зумом, який відповідає параметру devicePixelRatio.
СSS та MediaQuery у мобільній верстці
MediaQuery розжовано на безлічі сайтів, приділяти увагу опису не будемо. Лише опишемо низку проблем у вигляді маленького ЧАВО.
Який діапазон вибрати для MediaQuery при адаптивній верстці?
Як описано вище, наша рекомендація використовувати сітку в 600 пікселів по ширині. Десктопні екрани з роздільною здатністю менше 1024 пікселівзалишилися у музеях та руках колекціонерів. Можна про них забути. Боол
Дрібний текст у адаптивній/мобільній верстці сайту.
Рішення: варто збільшити розмір шрифту відповідно до devicePixelRatio або просто в 1,5 рази. Наприклад, так:
Змінюється розмір шрифту при зміні орієнтації/обертанні мобільного пристрою.
Скидаємо форматування для елементів форм
Кожен браузер повинен, ні, просто повинен бути унікальним. Виправляємо одвірок з різним форматуванням елементів форм, скасовуючи дефолтні стилі браузера. А вже робимо далі, як на душі лежить.
Safari в IOs збільшує шрифти у верстці
Mobile Safari в Ios (а також Chrome для Android, Mobile Firefox та IE Mobile) автоматично збільшують розмір шрифту всередині широких блоків. Це можна зафіксувати двома рядками CSS: