Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
Основные параметры метатега viewport
У viewport пять основных параметров — width, initial-scale, maximum-scale, minimum-scale, user-scalable.
Параметр width определяет ширину области просмотра. Чаще всего используется значение device-width, что означает «использовать ширину экрана текущего устройства».
<meta name="viewport" content="width=device-width">
Параметр initial-scale задаёт начальный масштаб страницы. Значение 1 означает, что страница будет отображена без масштабирования. Записывается так: initial-scale=1. Параметры maximum-scale и minimum-scale определяют, как сильно пользователь может увеличивать или уменьшать масштаб. Параметр user-scalable имеет значения yes или no и определяет, может ли пользователь масштабировать страницу.
Какой viewport использовать
Самый распространенный и рекомендуемый вариант использования viewport выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1">
Этот код говорит браузеру использовать ширину устройства и установить начальный масштаб в 1. Используйте такой вариант и не ошибётесь.