Метатег області перегляду

Ця стаття описує використання "viewport" тегу <meta> для контролю розмірів та форми області перегляду.

Контекст

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

Частина мобільних пристроїв та інших невеликих екранів візуалізує сторінки у віртуальному вікні або області перегляду, котра зазвичай є ширшою за екран, а потім стискає візуалізований результат, аби він увесь був видимий водночас. Далі користувачі можуть збільшувати й панорамувати, аби побачити детальніше різні області сторінки. Наприклад, коли мобільний екран має ширину 640px, то сторінки можуть бути візуалізовані з віртуальною областю видимості 980px, а потім бути стиснені для вміщення у простір 640px.

Це робиться тому, що не всі сторінки оптимізовані для мобільного і ламаються (або принаймні мають недобрий вигляд), коли візуалізуються з малою шириною області видимості. Така віртуальна область видимості є способом змусити неоптимізовані для мобільних сайти мати загалом кращий вигляд на пристроях з вузьким екраном.

Проте цей механізм працює не так добре для сторінок, оптимізованих для вузьких екранів за допомогою медіазапитів: якщо віртуальна область перегляду, наприклад, 980px, то медіазапити, котрі спрацьовують на 640px або 480px і менше – ніколи не будуть застосовані, обмежуючи ефективність таких технік адаптивного дизайну. Елемент області перегляду <meta> пом'якшує цю проблему віртуальної області перегляду на пристроях з вузькими екранами.

Основне про область перегляду

Типовий оптимізований для мобільних сайт містить щось схоже на таке:

<meta name="viewport" content="width=device-width, initial-scale=1" />

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

Серед базових атрибутів елемента <meta> "viewport":

width

Контролює (мінімальний) розмір області перегляду (дивіться Ширину області перегляду й ширину екрана). Йому можна задати конкретну кількість пікселів – width=600, або спеціальне значення device-width, яке відповідає фізичному розміру екрана пристрою в пікселях CSS. Це значення є основою для одиниці вимірювання vw. Мінімум – 1. Максимум – 10000. Від'ємні значення – ігноруються.

height

Контролює (мінімальний) розмір області перегляду (дивіться Ширину області перегляду й ширину екрана). Йому можна задати конкретну кількість пікселів – height=400, або спеціальне значення device-height, яке відповідає фізичному розміру екрана пристрою в пікселях CSS. Це значення є основою для одиниці вимірювання vh. Мінімум – 1. Максимум – 10000. Від'ємні значення – ігноруються.

initial-scale

Контролює рівень наближення при першому завантаженні сторінки. Мінімум – 0.1. Максимум – 10. Усталено – 1. Від'ємні значення – ігноруються.

minimum-scale

Контролює допустимий на сторінці рівень наближення. Мінімум – 0.1. Максимум – 10. Усталено – 0.1. Від'ємні значення – ігноруються.

maximum-scale

Контролює допустимий на сторінці рівень наближення. Будь-яке значення, більше за 3, зводить нанівець доступність. Мінімум – 0.1. Максимум – 10. Усталено – 10. Від'ємні значення – ігноруються.

user-scalable

Контролює те, чи дозволено на сторінці наближення й віддалення. Дійсні значення: 0, 1, yes, no. Усталено – 1, що тотожно yes. Задання 0, що тотожно no, порушує Настанови з доступності вебвмісту (WCAG).

interactive-widget

Задає те, як інтерактивні віджети UI, наприклад, віртуальна клавіатура, впливають на область перегляду сторінки. Дійсні значення: resizes-visual, resizes-content і overlays-content. Усталене – resizes-visual.

[!WARNING] Застосування user-scalable=no може призвести до проблем доступності для користувачів з порушеннями зору, як от слабким зором. WCAG вимагає щонайменше двократного наближення; проте найкращим підходом є дозволити п'ятикратне наближення.

Роздільна здатність екрана

Роздільна здатність екранів зросла до таких значень, що окремі пікселі не розрізняються людським оком. Наприклад, смартфони нерідко мають невеличкі екрани з роздільною здатністю до 1920–1080 пікселів (≈400dpi). Через це чимало браузерів може виводити сторінки в менших фізичних розмірах шляхом перекладу декількох апаратних пікселів на кожний "піксель" CSS. Спершу це призводило до проблем використовності та прочитності на багатьох оптимізованих для дотиків вебсайтах.

На екранах з високим значенням dpi сторінки з initial-scale=1 фактично будуть наближені. Їхній текст буде гладеньким та чітким, але їхні бітові зображення можуть не використовувати можливостей усієї роздільної здатності екрана. Щоб отримати на таких екранах різкіші зображення, веброзробники можуть розробляти зображення – або цілі макети – у більшому масштабі, ніж їхній підсумковий розмір, а потім віддаляти їх за допомогою CSS або властивостей області перегляду.

Усталене співвідношення пікселів залежить від роздільної здатності екрана. На екрані з роздільною здатністю, меншою за 200dpi, співвідношення – 1.0. На екранах з роздільною здатністю від 200 до 300dpi це співвідношення – 1.5. Для екранів з роздільною здатністю понад 300 dpi співвідношення – ціле число, що дорівнює floor (density/150dpi). Зверніть увагу, що усталене співвідношення діє лише тоді, коли масштаб області перегляду дорівнює 1. Інакше – співвідношення між пікселями CSS та пікселями пристрою залежить від поточного рівня наближення.

Ширина області перегляду й ширина екрана

Сайти можуть задавати своїй області перегляду конкретний розмір. Наприклад, визначення "width=320, initial-scale=1" може застосовуватись для точного вписування у невеликий екран телефона в портретному режимі. Це може призвести до проблем, коли браузер візуалізує сторінку в більшому розмірі. Аби це виправити, браузери збільшать ширину області перегляду, коли це необхідно, аби заповнити екран у заданому масштабі. Це особливо корисно на пристроях з великими екранами.

Для сторінок, що задають початковий або максимальний масштаб, це означає, що властивість width фактично перекладається на мінімальну ширину області перегляду. Наприклад, якщо макет потребує щонайменше 500 пікселів ширини, можна використати наступну розмітку. У разі, якщо екран більш ніж 500 пікселів завширшки, браузер збільшить ширину області перегляду (а не виконає наближення) для заповнення екрана:

<meta name="viewport" content="width=500, initial-scale=1" />

Інші доступні атрибути: minimum-scale, maximum-scale і user-scalable. Ці властивості впливають на початкові масштабування та ширину, а також обмежують зміни рівня наближення.

Вплив інтерактивних віджетів UI

Інтерактивні віджети UI браузера можуть впливати на розмір області перегляду сторінки. Найпоширеніший із таких віджетів – віртуальна клавіатура. Щоб керувати логікою зміни розміру, яку повинен використовувати браузер, задайте властивість interactive-widget.

Дозволені значення:

resizes-visual

Інтерактивний віджет змінює розмір візуальної області перегляду.

resizes-content

Інтерактивний віджет змінює розмір області перегляду.

overlays-content

Інтерактивний віджет не змінює ані області перегляду, ані візуальної області перегляду.

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

Поширені розміри області перегляду для мобільних та планшетних пристроїв

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

Специфікації

Дивіться також

• Стаття – Приготуйтеся до оновлення логіки зміни розміру області перегляду, що скоро станеться у Chrome на Android