@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

Смотреть также