Viewport

Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.

Впервые данный мета-тег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались неполностью, а только первые 320 пикселей по ширине.

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

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

Стоит обратить внимание, что параметры задаются внутри атрибута content, свойства в котором разделяются запятой.

Основные параметры мета-тега viewport

  • width — ширина сайта. Указывается в пикселях. Возможно использование значения device-width для установки ширины страницы равной ширине устройства.
  • height — высота сайта. Указывается в пикселях. Возможно использование значения device-height для установки высоты страницы равной ширине устройства.
  • initial-scale — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10. Значение единица не масштабирует страницу по умолчанию.
  • user-scalable — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение yes и no
<!-- viewport широной 980px с начальным масштабированием 1 и запретом пользователю масштабирования документа -->
<head>
    <meta name="viewport" content="width=980, initial-scale=1.0, user-scalable=no">
</head>

Задание

Добавьте мета-тег viewport с шириной экрана 1024px, без возможности масштабирования со стороны пользователя.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.