Viewport

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

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

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

<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

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

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