From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/@viewport/index.html | 162 ++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/ru/web/css/@viewport/index.html (limited to 'files/ru/web/css/@viewport/index.html') diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html new file mode 100644 index 0000000000..68a306a547 --- /dev/null +++ b/files/ru/web/css/@viewport/index.html @@ -0,0 +1,162 @@ +--- +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}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag) [4]{{CompatNo()}} [2]10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.429{{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

+ +

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

+ + -- cgit v1.2.3-54-g00ecf