Тег мета viewport

В этой статье описывается, как использовать тег «viewport» <meta> для управления размером и формой области просмотра.

Область просмотра браузера viewport — это та область окна, в которой отображается веб-контент. Она часто не совпадает по размеру с рендеренной страницей, в этом случае браузер предоставляет полосы прокрутки, чтобы пользователь мог просматривать весь контент.

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

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

Однако этот механизм не так хорош для страниц, оптимизированных для узких экранов с использованием средств запроса медиа — если виртуальная область просмотра составляет, например, 980 пикселей, средства запроса медиа, которые срабатывают при 640 пикселей или менее, никогда не будут использоваться, что ограничивает эффективность таких методов адаптивного дизайна. Тег мета viewport <meta> элемента минимизирует эту проблему виртуальной области просмотра на устройствах с узким экраном.

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

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

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

Основные атрибуты элемента «viewport» <meta> включают:

width

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

height

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

initial-scale

Управляет уровнем масштабирования при первой загрузке страницы. Минимальное значение: 0.1. Максимальное значение: 10. По умолчанию: 1. Отрицательные значения игнорируются.

minimum-scale

Управляет степенью уменьшения масштабирования на странице. Минимальное значение: 0.1. Максимальное значение: 10. По умолчанию: 0.1. Отрицательные значения игнорируются.

maximum-scale

Управляет степенью увеличения масштабирования на странице. Любое значение меньше 3 нарушает доступность. Минимальное значение: 0.1. Максимальное значение: 10. По умолчанию: 10. Отрицательные значения игнорируются.

user-scalable

Управляет тем, разрешено ли масштабирование на странице. Допустимые значения: 0, 1, yes, или no. По умолчанию: 1, что эквивалентно yes. Установка значения на 0, что эквивалентно no, противоречит рекомендациям по доступности веб-контента (WCAG).

interactive-widget

Определяет влияние интерактивных пользовательских элементов управления, таких как виртуальная клавиатура, на области просмотра страницы. Допустимые значения: resizes-visual, resizes-content, или overlays-content. По умолчанию: resizes-visual.

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

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

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

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

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

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

Другие атрибуты, которые доступны, — это minimum-scale, maximum-scale, и user-scalable. Эти свойства влияют на начальный масштаб и ширину, а также ограничивают изменения уровня масштабирования.

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

Допустимые значения:

resizes-visual

Визуальная область просмотра изменяет свой размер с помощью интерактивного элемента управления.

resizes-content

Область просмотра изменяет свой размер с помощью интерактивного элемента управления.

overlays-content

Ни область просмотра, ни визуальная область просмотра не изменяют свой размер с помощью интерактивного элемента управления.

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

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

• Статья: Подготовьтесь к изменениям поведения изменения размера области просмотра, которые появятся в Chrome на Android