@viewport
Оновлено: 09.01.2023
@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. |
| min-zoom | Аналогічно. | Встановлює мінімальний масштаб документа. За замовчуванням встановлено значення auto. |
| max-zoom | Аналогічно. | Встановлює максимальний масштаб документа. За замовчуванням встановлено значення auto. |
| user-zoom |
| Визначає, може користувач масштабувати документ чи ні. За замовчуванням встановлено значення zoom. |
| orientation |
| Керує орієнтацією документа. За замовчуванням встановлено значення 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>Примітка
Internet Explorer і Edge використовують правило @-ms-viewport.