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

{{HTMLSidebar}}

Ця стаття описує використання "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, котре тотожне 100vw, тобто 100% ширини області перегляду. Мінімум – 1. Максимум – 10000. Від'ємні значення – ігноруються.

height

Контролює розмір області перегляду. Може бути задана у вигляді конкретної кількості пікселів, як от height=400, або спеціального значення device-height, котре тотожне 100vh, тобто 100% висоти області перегляду. Мінімум – 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).

Застереження: Застосування 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. Ці властивості впливають на початкові масштабування та ширину, а також обмежують зміни рівня наближення.

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

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

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