diff options
Diffstat (limited to 'files/ru/glossary/viewport/index.html')
| -rw-r--r-- | files/ru/glossary/viewport/index.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/files/ru/glossary/viewport/index.html b/files/ru/glossary/viewport/index.html new file mode 100644 index 0000000000..a50f2c2763 --- /dev/null +++ b/files/ru/glossary/viewport/index.html @@ -0,0 +1,111 @@ +--- +title: Viewport +slug: Glossary/Viewport +translation_of: Glossary/Viewport +original_slug: Словарь/Viewport +--- +<p>Viewport - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.</p> + +<p>Окно просмотра представляет собой многоугольную (обычно прямоугольную) область в компьютерной графике, которая в настоящее время просматривается. В терминах веб-браузера это относится к той части просматриваемого документа, которая в данный момент отображается в ее окне (или на экране, если документ просматривается в полноэкранном режиме).<br> + Содержимое вне окна просмотра не отображается на экране до тех пор, пока оно не будет просмотрено.</p> + + + +<p>Meta-тег <strong>viewport</strong> сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.</p> + + + +<p><u>Пример</u>:</p> + +<pre class="brush: html"><meta name="viewport" content="width=device-width, initial-scale=1"></pre> + +<h3 id="Атрибуты_метатега_viewport">Атрибуты метатега viewport</h3> + +<p>Meta-тег <strong>viewport</strong> может иметь следующие атрибуты, указанные через запятую (<code>,</code>):</p> + +<p><strong>width</strong> – ширина области просмотра.</p> + +<p>Значением атрибута является целое неотрицательное число от <strong>200</strong> до <strong>10000</strong> пикселей или константа <strong>device-width</strong>, которая задаёт ширину страницы в соответствии с размером экрана.</p> + +<p>Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.</p> + +<blockquote><u>Примечание</u>: для сайтов с адаптивным дизайном рекомендуется использовать: <code>width=device-width</code>.</blockquote> + +<p><strong>height</strong> – высота области просмотра.</p> + +<p>Значением атрибута является целое неотрицательное число от <strong>233</strong> до <strong>10000</strong> пикселей или константа <strong>device-height</strong>, которая задаёт высоту страницы в соответствии с размером экрана.</p> + +<blockquote><u>Примечание</u>: если указан атрибут <strong>width</strong>, указывать атрибут <strong>height</strong> не обязательно.</blockquote> + +<p><strong>initial-scale</strong> – начальный масштаб страницы.</p> + +<p>Значением атрибута является вещественное число от <strong>0.1</strong> до <strong>1.0</strong>. Значение <strong>1.0</strong> определяет масштаб <strong>1:1</strong>, т.е. «не масштабировать».</p> + +<blockquote> +<p><u>Примечание</u>: в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: <strong>initial-scale=1.0</strong>.</p> +</blockquote> + +<p><strong>user-scalable</strong> – доступность масштабирования страницы пользователем.</p> + +<p>Значение атрибута является логическое «<strong>yes</strong>» (<code>1</code>) – можно масштабировать или «<strong>no</strong>» (<code>0</code>)– нельзя масштабировать.</p> + +<blockquote><u>Примечание</u>: рекомендуется использовать значение «<strong>yes</strong>» , а т.к. оно установлено по умолчанию, то <strong>user-scalable</strong> можно и не указывать.</blockquote> + +<p><strong>minimum-scale</strong> – минимальный масштаб области просмотра.</p> + +<p>Значением атрибута является вещественное число от <strong>0.1</strong> до <strong>1.0</strong>. В мобильном браузере Safari по умолчанию 0.25. Значение <strong>1.0</strong> определяет масштаб <strong>1:1</strong>, т.е. «не масштабировать».</p> + +<p><strong>maximum-scale</strong> – максимальный масштаб области просмотра.</p> + +<p>Значением атрибута является вещественное число от <strong>0.1</strong> до <strong>1.0</strong> . В мобильном браузере Safari по умолчанию 1.6. Значение <strong>1.0</strong> определяет масштаб <strong>1:1</strong>, т.е. «не масштабировать».</p> + +<blockquote><u>Примечание</u>: избегайте атрибутов <strong>user-scalable</strong>, <strong>minimum-scale</strong> и <strong>maximum-scale</strong>, т.к. они отрицательно сказываются на доступности содержания.</blockquote> + + + + + +<h2 id="Дополнительные_и_полезные_метатеги">Дополнительные и полезные метатеги</h2> + +<p>Meta-тег <strong>HandheldFriendly</strong> определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими другими мобильными браузерами.</p> + +<p><u>Пример</u>:</p> + +<pre class="brush: html"><meta name="HandheldFriendly" content="true"></pre> + +<p>Meta-тег <strong>MobileOptimized</strong> (<a href="http://goo.gl/ZpLjZz">http://goo.gl/ZpLjZz</a>) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута <strong>width</strong> в meta-теге <strong>viewport</strong>.</p> + +<p><u>Пример</u>:</p> + +<pre class="brush: html"><!-- фиксированная ширина в 320 пикселей --> +<meta name="MobileOptimized" content="320"> +<!-- ширина страницы в соответствии с размером экрана, аналог device-width --> +<meta name="MobileOptimized" content="width"></pre> + +<p>Meta-тег <strong>apple-mobile-web-app-capable</strong> (<a href="http://goo.gl/VGDYQC">http://goo.gl/VGDYQC</a>) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.</p> + +<p><u>Пример</u>:</p> + +<pre class="brush: html"><meta name="apple-mobile-web-app-capable" content="yes"></pre> + +<h2 id="Рекомендованный_набор_метатегов">Рекомендованный набор метатегов</h2> + +<p>Используемый мной набор meta-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:</p> + +<pre class="brush: html"><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'/></pre> + +<h2 id="Читать_больше">Читать больше</h2> + +<h3 id="General_Knowledge">General Knowledge</h3> + +<ul> + <li><a href="https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works">meta viewport. Как он работает?</a></li> + <li><a href="http://www.chuvyr.ru/2015/04/meta-viewport.html">Всё, что вы хотели знать о meta-теге viewport</a></li> + <li><a href="https://stackoverflow.com/questions/2939693/what-is-viewport-in-html">What is viewport in HTML</a> on Stackoverflow</li> + <li><a href="https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript">Get viewport/window size (width and height) with javascript</a></li> + <li><a href="https://www.quirksmode.org/mobile/viewports.html">A tale of two viewports</a> (Quirksmode)</li> + <li></li> +</ul> |