@viewport

Кратко

@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

Совместимость с браузерами:

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Настольные
Мобильные

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