Мета-тег viewport — як й де правильно використовувати? Інструкція щодо застосування інструменту

29.11.2021

Редакція: Оля Сомова. Автор: Ольга Сомова

Відповідно до трендів digital-маркетингу цифровий світ наступного року чекає на активне впровадження технологій для зручного використання мобільних пристроїв. Все частіше користувачі воліють заходити в інтернет за допомогою підручного гаджета. Зараз важливо приділяти увагу розробці мобільної версії, вкладати зусилля та кошти у цей пункт. Мета-тег viewport — це один із інструментів, основним завданням якого є коректна адаптація веб-сторінки на екрані будь-якого гаджета. У статті розглянемо, як правильно налаштувати мета-тег viewport й де його прописати згідно з інструкцією.

Зміст:

1. Поняття мета-тег viewport та основні функції
2. Головні атрибути та характеристики мета-тегу viewport
3. Як правильно налаштувати та прописати тег viewport у коді?
4. Значення тег viewport — для чого потрібний інструмент
5. Висновок

Поняття мета-тег viewport та основні функції

Різноманітність моделей телефонів, планшетів, ноутбуків призводить до великої кількості пристроїв, які відрізняються діагоналлю екрану, щільністю пікселів та іншими впровадженими технологіями. Одна й та ж сторінка з інформацією, що міститься, візуально може відображатися по-іншому, за рахунок відмінних параметрів екрана з різною роздільною здатністю. Якщо заходити з мобільного пристрою, часто слід використовувати горизонтальне прокручування, що у звичайного користувача може викликати дискомфорт. Подібна функція мала значні недоліки. З погляду юзабіліті такий принцип варто зарахувати до некоректної роботи сайту. Тому, щоб сторінка автоматично адаптувалася до пристрою, необхідно використовувати metatag viewport.

Вперше мета-теги viewport для мобільних пристроїв запровадила компанія Apple. Розробники впровадили елемент у браузер “Safari”. Вважається, що мета-тег viewport це повне відображення сайту з інформацією, яку користувач бачить, не застосовуючи при цьому додаткові інструменти. HTML-код сайту містить спеціальний елемент, який дозволяє користувачеві переглядати сайт без прокручування убік. Клієнт бачитиме інформацію лише за допомогою скролінгу по вертикалі. Завдяки мета-тегу viewport повна картинка відображається, не виходячи за рамки дисплея, й незалежно від розширення екрану. На смартфонах можна не застосовувати функцію масштабування, можна зручно переглядати контент, заповнювати форму й оформляти замовлення.

Мета-тег viewport має певні параметри та чітке позначення. Важливо прописати відповідний рядок у HTML-коді під час розробки сайту. Сторінка буде перетворюватись залежно від заданих параметрів. Мета-тег оптимізує мобільну версію та передає інформацію в браузер.

Головні атрибути та характеристики мета-тегу viewport

Viewport tag містить спеціальні параметри, що прописуються в HTML-коді. Мета-тег включає стандартний набір атрибутів з відповідним значенням й представляє наступний елемент:

Основні атрибути мета-тегу viewport:

• width – означає ширину сайту, яку потрібно прописувати у пікселях. Можна вказати роль device-width для встановлення ширини сторінки, що дорівнює ширині смартфона або іншого гаджета;
• height – це висота сайту в пікселях. Щоб встановити цей параметр, що дорівнює висоті пристрою, слід застосовувати значення device-height;
• initial-scale – початковий коефіцієнт масштабування. Показник набуває значень у проміжку від 0.1 до 10, а також змінювати масштаб потрібної сторінки за умовчанням;
• user-scalable — атрибут, який задає параметри для масштабування сторінки (наближати або віддаляти). Для застосування використовуються значення yes та no.

Крім цього, всередині коду можна вказати додаткові параметри за допомогою viewport tag. Є можливість прописати додаткові деталі, якщо є необхідність заборонити користувачеві використовувати масштабування, а також задати параметри, коли шаблон автоматично адаптується до орієнтації вікна.

• user-scalable ─ дозволяє або забороняє користувачеві змінювати масштаб (розмір) вікна;
• minimal-scale ─ мінімальний масштаб вікна;
• maximal-scale ─ максимальний масштаб вікна;
• orientation ─ управління орієнтацією;
• height – параметри висоти сторінки.

Варто звернути увагу до застосування атрибутів масштабування. Не рекомендується прописувати для неадаптивних сторінок такі значення, як

user-scalable=no або initial-scale=1 разом із maximum-scale=1

Подібна комбінація може повністю вимкнути функцію масштабування, в результаті чого користувач не зможе повністю переглянути інформацію. Рекомендується вибирати оптимальне значення ─ масштабування сторінки під розмір екрана в автоматичному режимі.

Як правильно налаштувати та прописати тег viewport у коді?

Елементи HTML-коду в системі CSS (Cascading Style Sheets – мова опису зовнішнього вигляду веб-сайту) несуть інформацію, яка передається браузеру для коректного відображення сторінки користувача. Виникає питання, де прописати тег viewport, щоб сайт правильно функціонував відповідно до моделі пристрою?

Прописати мета-тег слід на кожній сторінці в розділі “Head”, яку необхідно масштабувати під роздільну здатність екрана. Мета-тег viewport прописується до блоку за допомогою зазначених атрибутів. Можна брати готовий шаблон й вручну додавати параметри, що відповідають індивідуальному запиту.

Визначити роздільну здатність екрана можна за допомогою щільності пікселів.

1. Якщо показник щільності менше 200 пікселів, параметри екрана дорівнюватимуть фактичному показнику:

коефіцієнт CSS = 1

2. При показнику щільності 200-300 пікселів — роздільна здатність буде в 1,5 раза меншою від фактичного:

коефіцієнт CSS = 1,5

3. Щільність пікселів більше 300 пікселів – роздільна здатність визначається за допомогою формули:

показник щільності / 150 із заокругленням до цілого числа.

Значення тег viewport – для чого потрібен інструмент

Meta tag viewport — це насамперед про зручність. Оптимізація мобільної версії допомагає покращити залученість та взаємодію з клієнтом. Інструмент viewport створює сприятливу атмосферу й бажання затриматися на сторінці. З використанням мета-тегу viewport немає необхідності вчиняти зайві дії. Багато хто залишає сайт інтернет-магазину та інші ресурси, якщо немає необхідних умов. На даний момент мобільна версія відіграє важливу роль для підвищення конверсії та збільшення продажів.

Більшість користувачів мають інноваційні гаджети з якісним оснащенням, яке іноді перевершують навіть десктопні комп’ютери. Адаптацію під мобільні пристрої офіційно визнано SEO-фахівцями важливим фактором ранжування. Мета-тег viewport можна назвати мастхевом у сучасних технологічних умовах. Якщо ресурс не адаптований, він автоматично не потрапляє в топ.

За допомогою мета-тегу viewport можна налаштувати видиму частину сторінки, спираючись на розширення екрана смартфона, планшета та інших пристроїв. Повна інформація коректно відображатиметься на дисплеї мобільного телефону. Застосування viewport в коді забезпечує зручність для користувача. При вивченні сайту немає необхідності здійснювати “зайвих” рухів, використовувати додаткові інструменти у вигляді горизонтального прокручування.

Висновок

Viewport мета-тег зараз підтримує більшість браузерів. Відповідно багато брендів також використовують інструмент при розробці власного сайту в HTML-коді. Адаптивним вважається ресурс із можливістю переглянути вміст абсолютно з будь-якого пристрою. Сайти без застосування мета-тегу viewport втрачають більшу частину трафіку. Щоб виключити подібні додаткові фактори, що знижують продажі, необхідно враховувати важливі інструменти та створити зручність для потенційного клієнта та цільової аудиторії.

Також читайте інші статті в блозі Webpromo:

• Еволюція Чорної п’ятниці: історія виникнення від 50-х до ери цифрових технологій;
• Чорна п’ятниця: як правильно зробити вигідну пропозицію українському споживачеві?;
• Ремаркетинг як інструмент мотивації. Основні переваги та недоліки функції.

І підписуйтеся на наш Telegram-канал про маркетинг.