Как и зачем использовать тег viewport
Разбираемся, зачем нужен meta viewport и как его параметры управляют масштабом и шириной веб-страницы.
По умолчанию мобильные браузеры (например, Safari или Chrome) пытаются отобразить веб-страницу так, как будто она предназначена для большого экрана; возможно, что контент сожмется до размеров мобильного дисплея. Например, если ваш сайт рассчитан на ширину 1200px, браузер уменьшит его в 3–4 раза, чтобы уместить в физические 375px экрана. В результате:
Для решения подобных проблем применяется метатег viewport.
Мета viewport — это специальный html-тег, который сообщает браузеру, как правильно отображать страницу на разных устройствах. Без него сайт может выглядеть неадаптивным, а пользователям придётся вручную регулировать масштаб (scale), что ухудшает опыт взаимодействия.
Основная задача этого тега — сделать отображение контента оптимальным для любого экрана, будь то смартфон, планшет или десктоп.
Image by rawpixel.com on Freepik.
Когда браузер загружает страницу, он анализирует метатеги в разделе <head>. Если среди них есть tag с атрибутом name="viewport", устройство использует указанные в нём параметры для настройки области просмотра. Рассмотрим подробнее процесс отображения сайта.
Когда пользователь открывает сайт на мобильном устройстве без мета viewport, браузер действует по умолчанию. Это означает, что:
Пример:
Сайт, рассчитанный на десктоп, на смартфоне будет выглядеть как миниатюра, а для чтения текста придётся увеличивать масштаб вручную.
Но если браузер обнаруживает в разделе <head> мета тег с атрибутом meta name="viewport", он меняет логику рендеринга:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Как видим, без мета viewport браузер может применить стандартные настройки, искажающие дизайн. Понимание и правильное использование параметров этого метатега поможет вам создать сайт, который будет корректно отображаться на различных устройствах и обеспечит хороший пользовательский опыт.
В атрибуте content метатегов можно задавать различные значения, влияющие на отображение страницы. Рассмотрим его основные параметры.
width=device-width. Означает, что ширина (width) области просмотра должна соответствовать ширине экрана девайса. Например, для смартфона с шириной экрана 375 px значение width=device-width установит viewport в 375px.
Пример:
html
<meta name="viewport" content="width=device-width>Без этого параметра тега многие мобильные браузеры по умолчанию используют ширину 980px, сжимая контент. Текст может оказаться слишком мелким, а элементы интерфейса — нечитаемыми.
Не путайте width=device-width с фиксированными значениями вроде width=720. Второй вариант «заморозит» отображение web-страницы на заданной ширине — пропадёт адаптивность для устройств с другим размером экрана.
initial-scale=1.0. Параметр означает начальный масштаб страницы при загрузке. Значение 1.0 соответствует 100% масштабу, то есть контент отображается без увеличения или уменьшения.
Пример:
html
<meta name="viewport" content="initial-scale=1.0">Если установить initial-scale=2.0, страница откроется с двукратным увеличением, часть контента за границами экрана будет обрезана. Это усложнит навигацию для пользователя.
Всегда комбинируйте width=device-width и initial-scale=1.0, чтобы избежать конфликтов в разных браузерах. Например, iOS Safari может игнорировать width, если не задан initial-scale.
minimum-scale и maximum-scale. Эти параметры ограничивают диапазон масштабирования страницы:
Пример:
html
<meta name="viewport" content="minimum-scale=0.5, maximum-scale=3.0">Однако жёсткие ограничения (например, "maximum-scale=1.0") лишат пользователя возможности увеличить текст — это может быть критичным для людей с нарушениями зрения. Старайтесь не использовать эти параметры без крайней необходимости.
user-scalable=yes/no. Определяет, может ли пользователь изменять масштаб страницы с помощью жестов (например, «растягивания» пальцами).
Пример:
html
<meta name="viewport" content="user-scalable=no">Имейте в виду, что “user-scalable=no” нарушает принципы доступности (WCAG). Многие эксперты, включая Google, рекомендуют всегда оставлять возможность масштабировать контент.
Несмотря на простоту, мета viewport часто настраивают неправильно. Вот типичные ошибки:
Чтобы избежать этих проблем, придерживайтесь проверенных конфигураций и тестируйте сайт на реальных устройствах.
Оптимальная настройка для большинства сайтов выглядит так:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5">Приведенные параметры означают, что:
Если ваш сайт использует AMP (Accelerated Mobile Pages), мета viewport настраивается аналогично, но с дополнительными требованиями к скорости загрузки.
После настройки этого метатега проверьте себя:
Мета тег viewport — элемент html-разметки, напрямую влияющий на отображение сайта. Правильная настройка параметров делает страницу удобной для просмотра, улучшает пользовательский опыт и помогает избежать распространённых ошибок вёрстки.
Автор: ЕвробайтПоделиться
Работая с сайтами, веб-мастера часто сталкиваются с ситуациями, когда необходимо удалить, перенести или изменить URL-адреса определенных страниц или ресурса в целом.
Брандмауэр — это программа или программно-аппаратное решение, которые фильтруют входящий и исходящий сетевой трафик.
Как и любое программное обеспечение, сайты подвержены угрозе взлома, утечки данных или других неправомерных действий со стороны злоумышленников.
Надёжные VPS серверы с посуточной оплатой в России и Европе.
От 10 ₽ в день!
Арендовать виртуальный сервер
