Всё, что вы хотели знать о meta-теге viewport

Полное описание метатега viewport и его атрибутов. Примеры, примечания и рекомендации по адаптации сайта под мобильные устройства. А также дополнительные и полезные метатеги: HandheldFriendly, MobileOptimized и apple-mobile-web-app-capable.

Содержание

• Метатег viewport
  • Атрибуты метатега viewport
• Дополнительные и полезные метатеги
  • Meta-тег HandheldFriendly
  • Meta-тег MobileOptimized
  • Meta-тег apple-mobile-web-app-capable
• Рекомендованный набор метатегов

Метатег viewport

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

Примечание: метатег viewpost не входит в формальный стандарт и является частью спецификации CSS Device Adaptation (http://goo.gl/FSTGbn). Но пока эта спецификация не завершена и не применяется повсеместно, рекомендуется использовать meta-тег viewport отдельно и в сочетании со стилями @viewport в целях совместимости.

Пример:

<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'/>

На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/T4Q8L0