Мета-тег viewport. Что такое viewport и для чего используется в html и pug

Мета-тег viewport. Что такое viewport и для чего используется в html и pug

Метатеги — это инструкции для браузера о том, как отображать содержимое веб-страницы. Один из таких метатегов — 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 позволяет отключить масштабирование.
Spread the love
Читайте так же:  Нумерованные списки в html
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии