У статті розповідаємо, що таке метатег viewport і навіщо він потрібен, а наприкінці — посилання на ресурси, де можна перевірити, чи правильно вказано метатег і чи немає помилок у відображенні контенту.
Що таке метатег viewport і навіщо він потрібен
Viewport (з англ. "Вікно перегляду") - це видима користувачеві область веб-сторінки, яку він може переглянути без скролу (прокручування).
Однойменний метатег viewport потрібен для того, щоб повідомити браузеру, як змінювати масштаб сторінки в залежності від розміру пристрою користувача.
❗️Метатег viewport не адаптує сторінку сам. Він лише повідомляє, що сайт потрібно відобразити за певними правилами. Щоб браузер правильно зрозумів команду, сторінка повинна мати мобільну версію дизайну.
Завдяки метатегу viewport користувач бачить екран не так:
А так:
Атрибути метатегу viewport
Метатег має свої атрибути — спеціальні команди, які повідомляють певні параметри метатегу.
Ці команди передаються за допомогою атрибуту content. Усі вказані внизу значення meta viewport будуть вписані в атрибут content через кому, наприклад, так:
<meta name="viewport" content="width=device‑width, height=device‑height,
initial‑scale=1.0, maximum‑scale=1.0, minimum‑scale=1.0, user‑scalable=no">Width
Визначає, яка ширина буде в області перегляду:
- якщо значення атрибута device-width, то ширина сторінки підлаштовується під ширину екрана;
- якщо значення пікселів, наприклад 400, атрибут вкаже браузеру завжди відображати сторінку шириною 400 пікселів. Атрибут може набувати значення від 200 до 10 000 пікселів;
- якщо значення атрибуту не вказано, буде за замовчуванням прийматися таке значення: у Safari з мобільного – 980 px, Opera – 850 px, Android WebKit – 800 px, IE – 974 px.
Якщо сайт має адаптивний дизайн, рекомендується використовувати значення width=device-width
Height
Визначає, яка висота буде в області перегляду. Вказувати його не обов'язково, якщо вже вказано атрибут width, оскільки браузер збереже співвідношення сторін.
Якщо виставити значення атрибута device-height, висота сайту підлаштовується під висоту екрана. Але атрибуту можна надати і точне значення від 233 до 10 000 пікселів, наприклад 800 пікселів. Тоді висота сторінки буде постійною.
Initial-scale
Передає початковий масштаб сторінки. Вказує, у скільки разів область перегляду стане більшою чи меншою порівняно з її вихідним значенням.
Значення атрибута може бути від 0,1 до 10. Якщо вказати 1,0, область перегляду масштабується під розмір екрана 1:1.
User-scalable
Дозволяє або забороняє користувачам наближати та віддаляти сторінку.
Якщо user-scalable має значення «yes», можна масштабувати, якщо «no» — не можна. За промовчанням значення user-scalable завжди "yes", тому його можна не вказувати.
Minimum-scale та maximum-scale
З їх допомогою можна задати мінімальний та максимальний масштаб: minimum-scale та maximum-scale від 0,1 до 1,0. Значення 1,0 говорить браузеру "не масштабувати".
Мінімальний та максимальний масштаб використовують, щоб змінити налаштування браузерів. Наприклад, масштаб браузера Safari за промовчанням 0,25. Його можна змінити, якщо задати minimum-scale або maximum-scale.
Як налаштувати масштаб сторінки через метатег viewport
Метатег вказують у HTML-коді кожної сторінки в розділі <head></head> у такому вигляді:
<meta name="viewport" content="...">Усередині атрибуту content описуються всі необхідні значення через кому. Наприклад:
Як підібрати масштаб
- фізичне - можна виміряти;
- CSS – величина, яка залежить від густини пікселів.
Щільність пікселів - це кількість пікселів, яка припадає на один дюйм екрана. Вимірюється у PPI.
- перший атрибут підганяє область перегляду під CSS-ширину будь-якого девайс. Записують атрибут із значенням device-width так: width=device-width;
- другий атрибут збільшить масштаб у кілька разів через коефіцієнт, і текст не буде дрібним:
