@viewport
Дозволяє оптимізувати макет веб-сторінки залежно від різних пристроїв та їхніх розмірів. Є аналогом <meta name="viewport">, але переносить параметри з HTML у правила CSS.
Синтаксис
@viewport { <дескриптор>: <значення>; }
Значення
| Дескриптор | Допустимі значення | Опис |
|---|---|---|
| min-width | Будь-які одиниці CSS для розміру. | Мінімальна ширина області перегляду. |
| max-width | Будь-які одиниці CSS для розміру. | Мінімальна ширина області перегляду. |
| width | Будь-які одиниці CSS для розміру., а також device-width. | Одночасно встановлює min-width і max-width. |
| min-height | Будь-які одиниці CSS для розміру. | Мінімальна висота області перегляду. |
| max-height | Будь-які одиниці CSS для розміру. | Максимальна висота області перегляду. |
| height | Будь-які одиниці CSS для розміру., а також device-height. | Одночасно встановлює min-height и max-height. |
| zoom | auto - браузер автоматично встановлює масштаб, щоб цілком відобразити документ; <число> - позитивне число визначає масштаб, значення 1.0 відповідає 100%; <відсотки> - масштаб можна задавати у відсотках, 100% вказує, що масштабування не потрібне. | Встановлює початковий масштаб документа, може задаватися як позитивне дробове число або у відсотках. За замовчуванням встановлено значення auto. |
| min-zoom | Аналогічно. | Встановлює мінімальний масштаб документа. За замовчуванням встановлено значення auto. |
| max-zoom | Аналогічно. | Встановлює максимальний масштаб документа. За замовчуванням встановлено значення auto. |
| user-zoom | zoom — користувач може масштабувати документ; fixed —користувачеві заборонено змінювати масштаб. | Визначає, може користувач масштабувати документ чи ні. За замовчуванням встановлено значення zoom. |
| orientation | auto — встановлює орієнтацію автоматично на основі положення пристрою; portrait — документ має бути зафіксований у портретній орієнтації; landscape — документ має бути зафіксований в альбомній орієнтації. | Керує орієнтацією документа. За замовчуванням встановлено значення auto. |
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@viewport</title>
<style>
@viewport {
width: device-width;
zoom: 1;
max-zoom: 2;
}
</style>
</head>
<body>
...
</body>
</html>