Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить <meta name="viewport"> і чому він важливий?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Тег **`<meta name="viewport">`** керує тим, як вебсторінка відображається на мобільних пристроях, роблячи сайт адаптивним, тобто коректно масштабованим під розмір екрана користувача. **Ключове:** Без цього тегу сторінка на телефоні виглядатиме як зменшена копія десктопної версії, з крихітним текстом і горизонтальною прокруткою, а Google вважатиме сайт неоптимізованим для мобільних пристроїв.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТег `<meta name="viewport">` керує тим, **як вебсторінка відображається на мобільних пристроях**, смартфонах і планшетах. Він робить сайт **адаптивним**, тобто коректно масштабованим під розмір екрана користувача. Без цього тегу сторінка на телефоні виглядатиме **як зменшена копія десктопної версії**, з крихітним текстом і горизонтальною прокруткою. --- ### 1. Приклад базового тегу ```html <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` | Мінімальний масштаб | за бажанням | Приклад: ```html <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-перевірку.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.