1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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>
|
