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

• meta viewport. Как он работает?
• Viewport на Wikipedia
• What is viewport in HTML on Stackoverflow
• Get viewport/window size (width and height) with javascript
• A tale of two viewports (Quirksmode)