From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../viewport/index.html" | 110 +++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 "files/ru/\321\201\320\273\320\276\320\262\320\260\321\200\321\214/viewport/index.html" (limited to 'files/ru/словарь/viewport/index.html') diff --git "a/files/ru/\321\201\320\273\320\276\320\262\320\260\321\200\321\214/viewport/index.html" "b/files/ru/\321\201\320\273\320\276\320\262\320\260\321\200\321\214/viewport/index.html" new file mode 100644 index 0000000000..075b8fbf69 --- /dev/null +++ "b/files/ru/\321\201\320\273\320\276\320\262\320\260\321\200\321\214/viewport/index.html" @@ -0,0 +1,110 @@ +--- +title: Viewport +slug: Словарь/Viewport +translation_of: Glossary/Viewport +--- +

Viewport - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.

+ +

Окно просмотра представляет собой многоугольную (обычно прямоугольную) область в компьютерной графике, которая в настоящее время просматривается. В терминах веб-браузера это относится к той части просматриваемого документа, которая в данный момент отображается в ее окне (или на экране, если документ просматривается в полноэкранном режиме).
+ Содержимое вне окна просмотра не отображается на экране до тех пор, пока оно не будет просмотрено.

+ + + +

Meta-тег viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.

+ + + +

Пример:

+ +
<meta name="viewport" content="width=device-width, initial-scale=1">
+ +

Атрибуты метатега viewport

+ +

Meta-тег viewport может иметь следующие атрибуты, указанные через запятую (,):

+ +

width – ширина области просмотра.

+ +

Значением атрибута является целое неотрицательное число от 200 до 10000 пикселей или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана.

+ +

Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

+ +
Примечание: для сайтов с адаптивным дизайном рекомендуется использовать: width=device-width.
+ +

height – высота области просмотра.

+ +

Значением атрибута является целое неотрицательное число от 233 до 10000 пикселей или константа device-height, которая задаёт высоту страницы в соответствии с размером экрана.

+ +
Примечание: если указан атрибут width, указывать атрибут height не обязательно.
+ +

initial-scale – начальный масштаб страницы.

+ +

Значением атрибута является вещественное число от 0.1 до 1.0. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

+ +
+

Примечание: в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: initial-scale=1.0.

+
+ +

user-scalable – доступность масштабирования страницы пользователем.

+ +

Значение атрибута является логическое «yes» (1) – можно масштабировать или «no» (0)– нельзя масштабировать.

+ +
Примечание: рекомендуется использовать значение «yes» , а т.к. оно установлено по умолчанию, то user-scalable можно и не указывать.
+ +

minimum-scale – минимальный масштаб области просмотра.

+ +

Значением атрибута является вещественное число от 0.1 до 1.0. В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

+ +

maximum-scale – максимальный масштаб области просмотра.

+ +

Значением атрибута является вещественное число от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 1.6. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

+ +
Примечание: избегайте атрибутов user-scalable, minimum-scale и maximum-scale, т.к. они отрицательно сказываются на доступности содержания.
+ + + + + +

Дополнительные и полезные метатеги

+ +

Meta-тег HandheldFriendly определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими другими мобильными браузерами.

+ +

Пример:

+ +
<meta name="HandheldFriendly" content="true">
+ +

Meta-тег MobileOptimized (http://goo.gl/ZpLjZz) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута width в meta-теге viewport.

+ +

Пример:

+ +
<!-- фиксированная ширина в 320 пикселей -->
+<meta name="MobileOptimized" content="320">
+<!-- ширина страницы в соответствии с размером экрана, аналог device-width -->
+<meta name="MobileOptimized" content="width">
+ +

Meta-тег apple-mobile-web-app-capable (http://goo.gl/VGDYQC) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.

+ +

Пример:

+ +
<meta name="apple-mobile-web-app-capable" content="yes">
+ +

Рекомендованный набор метатегов

+ +

Используемый мной набор meta-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:

+ +
<meta name='viewport' content='width=device-width,initial-scale=1'/>
+<meta content='true' name='HandheldFriendly'/>
+<meta content='width' name='MobileOptimized'/>
+<meta content='yes' name='apple-mobile-web-app-capable'/>
+ +

Читать больше

+ +

General Knowledge

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