Viewport – необхідний тег для правильного відображення HTML-сторінки

Viewport – це екран, що фактично бачить користувач. Просте опис цього параметра вимірюється розміром діагоналі. На практиці опис видимої області сторінки монітора, це комплекс параметрів, що включає і діагональ, співвідношення сторін, і число пікселів на одиницю площі.

Viewport HTML – як з'явилося нове завдання для адаптивного екрану

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

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

CSS3 – сьогодні цю специфікацію підтримують багато пристроїв. Але вона має недоліки. Через безліч дозволів екрана адаптивність доводиться створювати окремо для кожного параметра. Два смартфони можуть мати ідентичну діагональ, але кількість точок на одиницю площі може відрізнятися вдвічі. Саме таку різницю можна спостерігати між продуктами компанії Apple.

Моделі смартфонів одного і того ж виробника відрізняються за кількістю точок на екрані вдвічі. Неточне визначення розмірів шрифту та контуру блоків призводило до появи незручного горизонтального прокручування. Це викликало великий дискомфорт для користувачів Інтернету.

Meta Viewport – це інструмент, який врахував недоліки файлу CSS3. Вертикальне прокручування вважається природним для будь-якої сторінки. Незручності викликає саме горизонтальне прокручування. Текст незручно читати, якщо його доводиться постійно переміщувати убік. Цей дефект виникає саме через неточність визначення ширини сторінки. А користувач може встановити екран по горизонталі.

Параметр додається у шапці сторінки HTML. У прикладі вказано два параметри – ім'я тега та ширина. Viewport Meta Tag - цей рядок дозволяє встановити точну ширину екрану. Завдяки цьому блок із текстом повністю охоплює ширину екрана.

Viewport device-width Як адаптувати сайт під екран смартфона з урахуванням шрифту

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

Viewport width параметр вказує браузеру, як обробляти сторінку. У наведених прикладах ми могли помітити різницю у визначенні ширини екрана.

Перший приклад задає фіксовану ширину монітора. Це може бути ціле позитивне число від 200 до 1000 пікселів. Другий приклад адаптує зміст сторінки під різні екрани.

Viewport height Перший рядок вказує висоту екрана, ціле число від 233 до 1000 пікселів.

Параметри зміни масштабу сторінки

Список параметрів показує основні способи масштабування. Важлива примітка – на практиці рекомендується використовувати лише перший параметр, оскільки решта ускладнить перегляд сторінки для користувача та знижує доступність змісту.

• initial-scale – споконвічний масштаб відображається числом від 0.1 до 1.0. Другий випадок забороняє масштабувати зміст сторінки. З урахуванням особливостей операційних систем, рекомендується застосовувати 1.0
• user-scalable – користувач зможе змінювати масштаб сторінки. Значення може бути 1 або 0. Рекомендується використовувати 1, це число вказано за замовчуванням. Таке положення дозволяє користувачеві змінювати масштаб сторінки
• minimum-scale – область перегляду найменшого розміру, що відображається діапазоном чисел від 0.1 до 1.0. Деякі браузери встановлюють за замовчуванням масштаб, тому рекомендується призначати 1.0, щоб уникнути небажаних сюрпризів
• maximum-scale – область перегляду максимального розміру позначається діапазоном від 0.1 до 1.0. Розробникам рекомендується призначати 1.0 щоб заборонити масштабування та залишити співвідношення 1:1

Де розташовується тег Viewport на сторінці HTML

Head – саме цей розділ кожної сторінки HTML має містити параметр Viewport. Враховуйте, що деякі браузери не враховують тег адаптації сторінки.

• Symbian
• Opera Mobile Mini
• Openwave

Для таких випадків використовують старі теги. Популярні конструктори сайтів, такі як WordPress, автоматично не призначають параметри адаптації. Для вирішення питання слід сказати спеціальний плагін. Але це не означає, що Viewport meta tag не можна прописати в коді. Пошукова система в цьому випадку врахує це як помилку. Тому вказівка на масштаб обов'язково має бути прописана на сторінці HTML.