Метатеги — это инструкции для браузера о том, как отображать содержимое веб-страницы. Один из таких метатегов — Viewport, который определяет видимую область страницы для пользователя. Он сообщает браузеру, как масштабировать и отображать страницу на различных устройствах.
Раньше экраны имели более или менее одинаковое разрешение. Однако сейчас ситуация усложнилась, так как пользователи заходят на страницы с разных устройств, у которых разрешение и соотношение сторон дисплея могут сильно отличаться.
Метатег viewport сам по себе не адаптирует страницу под разные устройства. Он только указывает браузеру, как нужно отображать страницу. Чтобы браузер правильно это понял, у страницы должна быть мобильная версия дизайна.
Пример для html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Пример для Node.js шаблонизатор pug
meta(name=’viewport’, content=’width=device-width, initial-scale=1′)
Для viewport можно задать следующие параметры:
- width — это ширина области просмотра (viewport). Она может быть задана как device-width (размер страницы будет подстраиваться под размер экрана) или как фактическое количество пикселей в виде целого положительного числа, например, 400px.
- height — Высота области просмотра (viewport) определяется атрибутом height. Если уже указан атрибут width, то браузер сохранит соотношение сторон. Если установить значение device-height для атрибута, то высота сайта будет подстраиваться под высоту экрана. Также можно присвоить атрибуту фактическое количество пикселей, например, 233px;
- initial-scale — это коэффициент масштабирования интернет-страницы. Он может принимать значения от 0,1 до 10, а значение 1,0 означает отсутствие масштабирования. Этот параметр указывает, во сколько раз область просмотра будет больше или меньше по сравнению с исходным размером;
- user-scalable — позволяет пользователям масштабировать страницу жестами. Он может принимать значение yes или no, указывая, разрешено ли масштабирование страницы;
- maximum-scale и minimum-scale — определяют максимальное и минимальное значение масштабирования соответственно. Они также могут принимать значения от 0,1 до 10. Значение 1,0 позволяет отключить масштабирование.