<meta name="viewport"> значение атрибута HTML

Значение viewport для атрибута name элемента <meta>> задает подсказки о том, как должен быть задан размер области просмотра.

Если указать его, можно задать поведение, связанное с областью просмотра, используя атрибут content элемента <meta> в виде списка из одного или нескольких значений, разделенных запятыми.

Примечания по использованию

Элемент <meta name="viewport"> имеет следующие дополнительные атрибуты:

content

Атрибут content должен быть задан; его значение определяет различные параметры поведения области просмотра. Значение представляет собой список из одной или нескольких пар «ключ-значение», разделенных запятыми и указанных в формате key=value. Определены следующие ключи:

width

Задает (минимальную) ширину области просмотра в пикселях (см. раздел Ширина области просмотра и ширина экрана). Можно указать положительное целое число пикселей от 1 до 10000 (например, width=600) или специальное значение device-width, которое соответствует физическому размеру экрана устройства в CSS-пикселях. Это значение задает величину единицы vw.

height

Задает (минимальную) высоту области просмотра в пикселях (см. раздел Ширина области просмотра и ширина экрана). Можно указать положительное целое число пикселей от 1 до 10000 (например, height=400) или специальное значение device-height, которое соответствует физическому размеру экрана устройства в CSS-пикселях. Это значение задает величину единицы vh.

initial-scale

Определяет отношение ширины устройства (device-width в портретном режиме или device-height в альбомном режиме) к размеру области просмотра. Значение может быть числом от 0.0 до 10.0.

maximum-scale

Задает максимальное увеличение масштаба. Значение должно быть больше или равно minimum-scale, иначе поведение не определено. Настройки браузера могут игнорировать это правило, а iOS 10 и более поздние версии по умолчанию его игнорируют. Значение может быть числом от 0.0 до 10.0.

minimum-scale

Задает минимальный уровень масштабирования. Значение должно быть меньше или равно maximum-scale, иначе поведение не определено. Настройки браузера могут игнорировать это правило, а iOS 10 и более поздние версии по умолчанию его игнорируют. Значение может быть числом от 0.0 до 10.0.

user-scalable

Логическое значение, указывающее, может ли пользователь масштабировать веб-страницу. Настройки браузера могут игнорировать это правило, а iOS 10 и более поздние версии по умолчанию его игнорируют. Значением может быть yes или no; по умолчанию используется yes.

Предупреждение: Отключение масштабирования с помощью значения no для параметра user-scalable мешает людям с нарушениями зрения читать содержимое страницы и понимать его. Кроме того, WCAG требует масштабирования как минимум в 2 раза; однако рекомендуется разрешить увеличение в 5 раз. Дополнительную информацию см. в следующих материалах:

• MDN: пояснения к руководству WCAG, пункт 1.4
• Понимание критерия успеха 1.4.4 | W3C: понимание WCAG 2.0

interactive-widget

Задает влияние интерактивных элементов пользовательского интерфейса, например виртуальных клавиатур, на область просмотра страницы. Возможные ключевые слова: resizes-visual, resizes-content или overlays-content.

• resizes-visual: интерактивный элемент изменяет размер визуальной области просмотра. Это поведение используется по умолчанию.
• resizes-content: интерактивный элемент изменяет размер области просмотра.
• overlays-content: интерактивный элемент не изменяет размер ни области просмотра, ни визуальной области просмотра.

При изменении размера области просмотра также изменяется размер исходного блока-контейнера, что влияет на вычисленный размер единиц области просмотра.

viewport-fit

Определяет видимые области веб-страницы. Значением может быть одно из ключевых слов: auto, contain или cover.

• auto: не влияет на исходную область просмотра макета, и веб-страница видна целиком.
• contain: область просмотра масштабируется так, чтобы поместиться в наибольший прямоугольник, вписанный в экран.
• cover: область просмотра масштабируется так, чтобы заполнить экран устройства. Настоятельно рекомендуется использовать переменные вставки безопасной области, чтобы важное содержимое не оказалось за пределами экрана.

Ширина области просмотра и ширина экрана

Область просмотра браузера — это область окна, в которой отображается веб-содержимое. Размер области просмотра необходимо вычислить до размещения содержимого страницы. Содержимое может выходить за ее пределы; в этом случае браузер отображает полосы прокрутки, позволяя пользователю перемещаться по странице и просматривать все содержимое. При этом размер области просмотра определяет, сколько места, особенно по горизонтали, должно занимать содержимое.

На некоторых мобильных устройствах и других устройствах с узким экраном страницы отображаются в виртуальном окне или области просмотра, ширина которой превышает ширину экрана, а затем уменьшаются, чтобы уместиться на экране. После этого пользователи могут увеличивать масштаб и перемещать страницу, чтобы подробнее рассмотреть разные ее области. Например, если ширина экрана мобильного устройства составляет 640 пикселей, страницы могут отображаться в виртуальной области просмотра шириной 980 пикселей, а затем уменьшаться до размера области шириной 640 пикселей. Это делается потому, что не все страницы оптимизированы для мобильных устройств и могут ломаться (или, по крайней мере, выглядеть плохо) при отображении в узкой области просмотра. Такая виртуальная область просмотра в целом улучшает отображение сайтов, не оптимизированных для мобильных устройств с узкими экранами. Однако этот механизм не подходит для страниц, оптимизированных для узких экранов с помощью медиазапросов: если, например, ширина виртуальной области просмотра составляет 980 пикселей, медиазапросы, активирующиеся при ширине 640, 480 пикселей или меньше, никогда не будут применены, что ограничит эффективность таких методов адаптивного дизайна. Элемент viewport <meta> помогает решить эту проблему виртуальной области просмотра на устройствах с узкими экранами.

Чаще всего используют следующую настройку, которая задает ширину области просмотра равной ширине устройства и отображает содержимое в масштабе 100%:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Сайты могут задавать области просмотра определенный размер. Например, определение "width=320, initial-scale=1" позволяет точно подогнать страницу под небольшой экран телефона в портретном режиме. Это может вызвать проблемы, если браузер отображает страницу в большем размере. Чтобы решить эту проблему, браузеры при необходимости увеличивают ширину области просмотра, чтобы заполнить экран с заданным масштабом. Это особенно полезно на устройствах с большими экранами.

Для страниц, задающих начальный или максимальный масштаб, это означает, что свойство width фактически определяет минимальную ширину области просмотра. Например, если макету нужна ширина не менее 500 пикселей, можно использовать следующую разметку. Если ширина экрана превышает 500 пикселей, браузер расширит область просмотра (вместо увеличения масштаба), чтобы она соответствовала экрану:

<meta name="viewport" content="width=500, initial-scale=1" />

Плотность экрана

Разрешение экранов выросло настолько, что человеческий глаз уже не различает отдельные пиксели. Например, смартфоны часто имеют небольшие экраны с разрешением 1920 × 1080 пикселей и выше (≈400 dpi). Поэтому многие браузеры отображают страницы в меньшем физическом размере, используя несколько аппаратных пикселей на каждый CSS-пиксель. Изначально это приводило к проблемам с удобством использования и читаемостью на многих веб-сайтах, оптимизированных для сенсорного управления.

На экранах с высоким разрешением страницы с initial-scale=1 будут фактически увеличиваться браузерами. Текст будет гладким и четким, но растровые изображения могут не использовать все разрешение экрана. Чтобы изображения на таких экранах были более четкими, веб-разработчики могут создавать изображения — или целые макеты — в масштабе выше конечного, а затем уменьшать их с помощью CSS или свойств области просмотра.

Коэффициент пикселей по умолчанию зависит от плотности экрана. На экранах с плотностью менее 200 dpi коэффициент равен 1,0. На экранах с плотностью от 200 до 300 dpi коэффициент равен 1,5. Для экранов с плотностью более 300 dpi коэффициент равен целой части от (плотность/150 dpi). Обратите внимание, что коэффициент по умолчанию действует только при масштабе области просмотра, равном 1. В противном случае зависимость между CSS-пикселями и пикселями устройства определяется текущим уровнем масштабирования.

Примеры

Использование размера области просмотра meta

В следующем примере браузеру указывается, что страницу следует отображать в соответствии с шириной устройства:

<meta name="viewport" content="width=device-width" />

Использование медиазапроса с meta viewport

Следующее значение content использует несколько ключевых слов, указывающих браузеру включить полноэкранный режим, а также viewport-fit, помогающее избежать вырезов на экране, например выемок на мобильных устройствах:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

Влияние интерактивных элементов интерфейса

Интерактивные элементы пользовательского интерфейса браузера могут влиять на размер областей просмотра страницы. Самый распространенный пример такого элемента — виртуальная клавиатура. Чтобы задать используемое браузером поведение при изменении размера, установите свойство interactive-widget.

По умолчанию виртуальная клавиатура изменяет размер только визуальной области просмотра, не влияя на макет страницы. Чтобы макет страницы адаптировался к появлению виртуальной клавиатуры, установите для свойства interactive-widget значение resizes-content:

<meta name="viewport" content="interactive-widget=resizes-content" />

Спецификации

Совместимость с браузерами

См. также

• термин глоссария область просмотра
• Подготовьтесь к изменениям поведения при изменении размера области просмотра в Chrome для Android на developer.chrome.com
• Области просмотра мобильных устройств для адаптивных интерфейсов на Adobe Experience League