--- title: '@viewport' slug: Web/CSS/@viewport tags: - Adaptation - At-rule - CSS - Device - NeedsContent - NeedsTranslation - Reference - TopicStub translation_of: Web/CSS/@viewport ---

{{CSSRef}}

Кратко

@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
Управляет ориентацией документа.

Формальный синтаксис

{{csssyntax}}

Пример:

@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
}

Спецификация:

Спецификация Статус Комментарий
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}} {{Spec2('CSS3 Device')}} Initial definition

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

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 29 (behind a flag) [4] {{CompatNo()}} [2] 10 {{property_prefix("-ms")}} 11.10
Removed in 15
Reintroduced behind a flag in 16		 {{CompatNo}} [3]
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4 29 {{CompatNo}} [2] 10{{property_prefix("-ms")}}[1] 11.10
Removed in 15
Reintroduced behind a flag in 16		 {{CompatNo}} [3]

[1] существует ошибка в IE Mobile 10 и на более старых версиях Windows Phone 8, гдеdevice-width, при использовании внутри @-ms-viewport, оценивает ширину экрана в физических пикселях, а не в нормализованных CSS-пикселях, что неверно в соответствии со спецификацией. Однако, при использовании вviewport {{HTMLElement("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 {{bug(747754, 'summary')}}

[3]: See {{webkitbug(95959)}}

[4]: See Chromium issue #235457: Enable @viewport on all platforms

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