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

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

meta viewport

Содержание

  • Метатег 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

Сергей Нуйкин
Сергей Нуйкин комментирует...

Константин, очень хороший мануал получился по viewport. Чесно говоря в основном встречаю использование только написание первой строки из рекомендованного вами набора.

Константин Кирилюк
Константин Кирилюк комментирует...

2Сергей Нуйкин Да, сейчас всё меньше уделяют внимание кросбраузерности, т.к. старые технологии действительно отходят уже на второй план. К тому же нет простого инструмента, позволяющего проверить, как будет выглядеть то или иное решение на соответствующем устройстве.

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

Константин Кирилюк
Константин Кирилюк комментирует...

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

Если ваш сайт не оптимизирован под мобильные устройства укажите в качестве значения параметра width минимальную (!) ширину, при котором сайт вмещает на экран целиком + около 30 пикселей для дополнительного захвата под ту же полосу прокрутки.

Например десктопная ширина моего блога составляет 970 пикселей, добавим 30, получим 1000, таким образом:

<meta content='width=1100' name='viewport'>