Що робить <meta name="viewport"> і чому він важливий?
Тег <meta name="viewport"> керує тим, як вебсторінка відображається на мобільних пристроях, смартфонах і планшетах.
Він робить сайт адаптивним, тобто коректно масштабованим під розмір екрана користувача.
Без цього тегу сторінка на телефоні виглядатиме як зменшена копія десктопної версії, з крихітним текстом і горизонтальною прокруткою.
1. Приклад базового тегу
<meta name="viewport" content="width=device-width, initial-scale=1.0">Розшифровка параметрів:
width=device-width: встановлює ширину області перегляду рівною ширині екрана пристрою (а не 980px, як типово).initial-scale=1.0: задає початковий масштаб відображення (100%).
Завдяки цьому сторінка автоматично підлаштовується під екран, текст читабельний, елементи не «розповзаються».
2. Що буде без viewport
Без цього тегу браузер мобільного пристрою:
- рендерить сторінку у «віртуальному вікні» шириною ~980 пікселів;
- потім стискає її під екран, щоб усе влізло;
- користувачу доводиться наближати й прокручувати контент вручну.
Це робить сайт незручним і знижує позиції в мобільній видачі.
3. Часто використовувані параметри
| Параметр | Призначення | Приклад |
|---|---|---|
width=device-width | Ширина сторінки дорівнює екрану пристрою | обов'язковий |
initial-scale=1.0 | Масштаб 100% під час завантаження | обов'язковий |
maximum-scale=1.0 | Забороняє користувачу збільшувати масштаб | використовувати обережно (доступність!) |
user-scalable=no | Повністю блокує масштабування | не рекомендується |
minimum-scale=1.0 | Мінімальний масштаб | за бажанням |
Приклад:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">4. Чому тег важливий для SEO і UX
Для SEO:
Google та інші пошукові системи оцінюють мобільну адаптивність як ключовий фактор ранжування.
Без viewport сайт вважається неоптимізованим для мобільних пристроїв і втрачає позиції.
Для UX (користувацького досвіду):
- Контент автоматично масштабується під екран;
- Текст залишається читабельним без збільшення;
- Елементи інтерфейсу стають зручними для натискання;
- Користувач не відчуває роздратування під час прокручування.
Підсумок:
| Властивість | Значення |
|---|---|
| Тег | <meta name="viewport"> |
| Розташування | Усередині <head> |
| Призначення | Керує адаптивним відображенням сторінки |
| Основні параметри | width=device-width, initial-scale=1.0 |
| Важливість для SEO | Критична: впливає на мобільний рейтинг |
| Без нього | Сторінка «стискається» і виглядає некоректно |
Простими словами:
<meta name="viewport"> каже браузеру:
«Покажи сторінку під ширину екрана користувача, а не як на комп'ютері.»
Це основний тег адаптивної верстки, без якого сайт не буде зручним і не пройде мобільну SEO-перевірку.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.