@viewport¶
Правило @viewport
позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Является аналогом <meta name="viewport">
, но переносит параметры из HTML в правила CSS.
@-правила
Синтаксис¶
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
Значения¶
min-width¶
Минимальная ширина области просмотра. Любые единицы CSS для размера.
max-width¶
Максимальная ширина области просмотра. Любые единицы CSS для размера.
width¶
Одновременно устанавливает min-width
и max-width
. Любые единицы CSS для размера, а также device-width
.
min-height¶
Минимальная высота области просмотра. Любые единицы CSS для размера.
max-height¶
Максимальная высота области просмотра. Любые единицы CSS для размера.
height¶
Одновременно устанавливает min-height
и max-height
. Любые единицы CSS для размера, а также device-height
.
zoom¶
Устанавливает начальный масштаб документа, может задаваться как положительное дробное число или в процентах. По умолчанию установлено значение auto
.
auto
- браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ;
<число>
- положительное число определяет масштаб, значение
1.0
соответствует100%
; <проценты>
- масштаб можно задавать в процентах,
100%
указывает, что масштабирование не требуется.
min-zoom¶
Устанавливает минимальный масштаб документа. По умолчанию установлено значение auto
.
auto
- браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ;
<число>
- положительное число определяет масштаб, значение
1.0
соответствует100%
; <проценты>
- масштаб можно задавать в процентах,
100%
указывает, что масштабирование не требуется.
max-zoom¶
Устанавливает максимальный масштаб документа. По умолчанию установлено значение auto
.
auto
- браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ;
<число>
- положительное число определяет масштаб, значение
1.0
соответствует100%
; <проценты>
- масштаб можно задавать в процентах,
100%
указывает, что масштабирование не требуется.
user-zoom¶
Определяет, может пользователь масштабировать документ или нет. По умолчанию установлено значение zoom
.
zoom
- пользователь может масштабировать документ;
fixed
- пользователю запрещено изменять масштаб.
orientation¶
Управляет ориентацией документа. По умолчанию установлено значение auto
.
auto
- устанавливает ориентацию автоматически на основе положения устройства;
portrait
- документ должен быть зафиксирован в портретной ориентации;
landscape
- документ должен быть зафиксирован в альбомной ориентации.
Спецификация¶
Пример¶
<!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>