Кратко
@viewport
CSS at-rule cсодержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.
Синтаксис
Коэффициент масштабирования, равный 1,0 или 100%, соответствует отсутствию масштабирования. Увеличьте масштаб больших значений. Меньшие значения уменьшаются
Дескриптор
Браузеры должны игнорировать непризнанные дескрипторы.
min-width
- Используется при определении ширины видового экрана при первом отображении документа.
max-width
- Используется при определении ширины видового экрана при первом отображении документа.
width
- Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).
min-height
- Используется при определении высоты видового экрана при первом отображении документа.
max-height
- Используется при определении высоты видового экрана при первом отображении документа.
height
- Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).
zoom
- Устанавливает начальный коэффициент масштабирования.
min-zoom
- Устанавливает минимальный коэффициент масштабирования.
max-zoom
- Устанавливает максимальный коэффициент масштабирования.
user-zoom
- Управляет тем, должен ли пользователь иметь возможность изменять коэффициент масштабирования.
orientation
- Управляет ориентацией документа.
Формальный синтаксис
@viewport { <group-rule-body> }
Пример:
@viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; }
Спецификация:
Спецификация | Статус | Комментарий |
---|---|---|
CSS Device Adaptation Определение '@viewport' в этой спецификации. |
Рабочий черновик | Initial definition |
Совместимость с браузерами:
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 29 (behind a flag) [4] | Нет [2] | 10 -ms | 11.10 Removed in 15 Reintroduced behind a flag in 16 |
Нет [3] |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.4 | 29 | Нет [2] | 10-ms[1] | 11.10 Removed in 15 Reintroduced behind a flag in 16 |
Нет [3] |
[1] существует ошибка в IE Mobile 10 и на более старых версиях Windows Phone 8, гдеdevice-width
, при использовании внутри @-ms-viewport
, оценивает ширину экрана в физических пикселях, а не в нормализованных CSS-пикселях, что неверно в соответствии со спецификацией. Однако, при использовании вviewport
<meta>
тэг, device-width
оценивает правильно. По данным Microsoft, эта ошибка была исправлена в Windows Phone 8 Update 3 (a.k.a. GDR3), хотя есть некоторые сообщения о том, что Lumia Black Обновление GDR3 не исправило ошибку (по крайней мере, на Lumia 920). Для получения более подробной информации и обходного пути, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".
[2]: See баг 747754
[3]: See Баг WebKit 95959
[4]: See Chromium issue #235457: Enable @viewport on all platforms
Смотреть также
<meta>
, specifically<meta name="viewport">
- Using the viewport meta tag to control layout on mobile browsers