Мета-тег viewport: как настроить область просмотра для адаптивной верстки

Краткое саммари

Мета-тег viewport задает браузеру ширину области просмотра и начальный масштаб страницы. Для адаптивной верстки подходит базовая настройка: <meta name="viewport" content="width=device-width, initial-scale=1">. А на CSS-правило @viewport в современных проектах не рассчитывают.

Кому стоит прочитать эту статью: верстальщикам, frontend-разработчикам, SEO-специалистам, владельцам сайтов и редакторам, которые проверяют мобильную версию сайта, адаптивный дизайн и ошибки отображения на смартфонах.

Экран и область просмотра в адаптивном дизайне

Пользователи заходят в интернет с разных устройств: компьютеров, ноутбуков, планшетов, смартфонов. У разных моделей может быть разное разрешение экрана, и если сайт некорректно отображается, часть пользователей закроет ресурс.

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

Размер, разрешение экрана, плотность пикселей у разных устройств отличаются. Выделяют такие показатели:

• диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
• размер экрана в точках — количество точек, их устройство использует для координат;
• полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
• физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5" физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

• плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
• от 200 до 300 DPI — 1.5.
• более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагают контент по модульной сетке — например, по сетке Bootstrap 5 — и используют адаптивную верстку. Сервер может отправлять одинаковый HTML-код на все устройства, а CSS масштабирует размеры элементов под разные экраны с помощью гибких единиц, медиазапросов и мета-тега viewport в HTML. Это помогает сохранить четкие изображения и читабельный текст.

Адаптивность входит в современные требования к дизайн-макетам сайта: Figma, PSD или другому формату передачи макета в разработку. Пример требований by andrey-hohlov на GitHub. 

FAQ по разделу

Что такое viewport?

Это видимая область страницы в браузере. На мобильном устройстве она измеряется в CSS-пикселях, а не в физических пикселях экрана.

Зачем нужен viewport в адаптивной верстке?

Он сообщает браузеру, какой ширины должна быть страница и с каким масштабом ее открыть. Без этого смартфон может показать десктопную версию с мелким текстом.

Влияет ли адаптивный дизайн сайта на SEO?

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

Как работает мета-тег viewport в HTML

Viewport — это видимая пользователю область страницы сайта без прокруток.

На адаптивном сайте страницы доступны для всех типов устройств и корректно отображаются вне зависимости от разрешения экрана. Пользователю комфортно читать текст, рассматривать изображения, скроллить контент, заполнять графы, оформлять покупки. Прокрутка контента только вертикальная, на смартфонах масштабировать отображение контента вручную не требуется.

Мета-тег "viewport" и CSS правило @viewport

CSS-правило @viewport появилось как попытка перенести настройки области просмотра из HTML в CSS. Оно не стало массовым стандартом и не подходит как основа для современной адаптивной верстки. Лучше использовать мета-тег viewport, медиазапросы CSS и гибкие размеры. Разработчики контролируют масштаб отображения страницы сайта в окне устройства в первую очередь с помощью мета-тега viewport.

Справа мобилопригодная страница с тегом "viewport", в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.

FAQ по разделу

Какой viewport нужен для адаптивного сайта?

Достаточно строки <meta name="viewport" content="width=device-width, initial-scale=1">.

Можно ли запретить масштабирование?

Да, но не стоит этого делать, запрет масштабирования ухудшает доступность. Так пользователи с плохим зрением не смогут увеличить текст.

Нужен ли CSS @viewport?

Нет, современные браузеры ориентируются на мета-тег viewport и CSS-медиазапросы.

Как и где указывать тег "viewport": правильная настройка

Страницы сайта должны корректно отображаться на разных дисплеях. Для этого в HTML-страницу включают мета-тег viewport, а в CSS настраивают адаптивную верстку: гибкие контейнеры, медиазапросы, относительные единицы и ограничения ширины.

Мета-тег viewport размещают внутри блока <head> в таком виде:

<meta name="viewport" content="width=device-width, initial-scale=1">

Как настроить размер окна просмотра

Атрибут "width"

Атрибут "width" адаптирует ширину окна просмотра к экрану устройства. Указывают либо целое неотрицательное значение от 200px до 10 000px, либо константу "device-width" — она означает, что устройство масштабирует ширину страницы под размер экрана.

Веб-мастер может установить конкретное число пикселей в этом атрибуте, к примеру, width=600. Так делают, если макет должен быть не менее 600px шириной. Если экран окажется больше, браузер не будет увеличивать масштаб, а станет расширять область просмотра, чтобы она растянулась до размеров экрана.

<meta name="viewport" content="width=600, initial-scale=1">

К примеру, у старых смартфонов часто встречалась ширина области просмотра около 320 CSS-пикселей. У современных моделей распространены значения 360, 390, 393, 412, 428 и 430 CSS-пикселей, хотя физическое разрешение экрана намного выше. Поэтому при настройке viewport важно использовать width=device-width, гибкую сетку и проверять несколько контрольных ширин.

Какие значения масштаба использовать

Размеры видимой области страницы в окне устройства определяют по размеру экрана и плотности пикселей. Если плотность пикселей на устройстве не совпадает с плотностью изображения — фактическим количеством пикселей, то устройство должно масштабировать значения.

Многие разработчики не указывают конкретные значения пикселей в коде, а используют относительные размеры в процентах. Это позволяет браузерам подбирать масштаб, исходя из пользовательского экрана. Относительные величины в коде делают макет проще и предотвращают случаи, когда из-за неправильно подобранного значения в область просмотра не помещаются важные элементы.

Веб-мастеру будет сложно работать с сайтом, если он попытается определить контрольные точки под все классы и модели устройств. Вместо этого лучше задать несколько устойчивых брейкпоинтов по контенту и проверить их во встроенном режиме устройств в Chrome DevTools, Edge DevTools или в похожих инструментах браузера. Если для блока верхнего уровня установить параметр width: 100%, на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим.

div.fullWidth {
 width: 100%;
}

Как использовать медиазапросы CSS

Для улучшения отображения на разных экранах используют медиазапросы CSS — фильтры, которые позволяют изменять стили по характеристикам окна просмотра: ширине, высоте, ориентации, плотности пикселей и возможностям устройства. Это основной инструмент адаптивной верстки вместе с мета-тегом viewport.

С помощью медиазапросов CSS веб-мастер может настроить отображение стилей в зависимости от размера экрана устройства. Для этого применяют код:

@media (query) {
 /* CSS Rules used when query matches */
}

В адаптивном дизайне применяют функции:

• "min-width" — применимо к браузеру, ширина которого больше, чем указано в запросе;
• "max-width" — к браузеру, ширина которого меньше;
• "min-height" — к браузеру, высота которого больше значения, указанного в запросе;
• "max-height" — к браузеру, высота которого меньше.

Если устройство имеет диапазон разрешения от 640 до 1024px, указанное правило @viewport будет масштабировать окно до 640px:

@media screen and (max-width: 400px) {
 @-ms-viewport { width: 320px; } 
 ...
}

К примеру, установим значения:

При ширине браузера от 0 до 640px применяется max-640px.css.

При ширине браузера 500-600px применяются стили из @media.

При ширине браузера 640px и выше применяется min-640px.css.

Если в браузере ширина больше высоты — горизонтальная ориентация, применяется landscape.css.

Если в браузере высота больше ширины — вертикальная ориентация, применяется portrait.css.

Код для этих значений будет выглядеть так:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
 @media (min-width: 500px) and (max-width: 600px) {
 h1 {
 color: fuchsia;
 }
 .desc:after {
 content:" In fact, it's between 500px and 600px wide.";
 }
 }
</style>

Как настроить отображение в зависимости от ориентации дисплея

Атрибут "initial-scale=1»

Некоторые браузеры при изменении ориентации с вертикальной на горизонтальную увеличивают масштаб. Атрибутом "initial-scale=1" указывают браузеру соотношение пикселей CSS и устройства независимо от ориентации дисплея, в соотношении один к одному. В ориентации по горизонтали страница будет выглядеть лучше. Атрибут может иметь значение от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибуты "maximum-scale", "minimum-scale" и "user-scalable"

Кроме настройки initial-scale у разработчика есть атрибуты maximum-scale, minimum-scale и user-scalable. Они ограничивают масштабирование страницы пользователем или запрещают его.

Спецификация HTML и рекомендации по доступности не советуют полностью запрещать масштабирование страницы. Это может ухудшить пользовательский опыт, вызвать проблемы с валидацией и нарушить доступность сайта для людей, которым нужно увеличить текст или интерфейс.

"maximum-scale" и "minimum-scale" определяют максимальный и минимальный масштаб окна. Могут иметь значения от от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибут "maximum-scale=1" при переключении ориентации оставит настройки масштаба неизменными:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

"user-scalable" определяет, может ли пользователь изменять масштаб. Он имеет значение "no" или "yes", по умолчанию стоит "yes".

Дескриптор "orientation"

Ориентацией документа в @viewport можно управлять с помощью дескриптора "orientation". У него есть три значения:

• auto — ориентация на основе положения устройства;
• landscape — горизонтальная ориентация;
• portrait — вертикальная ориентация.

По умолчанию установлено значение auto.

Медиазапросы и "device-width"

Google в руководстве для веб-мастеров предлагает комбинировать значения "device-width" с медиа-запросами и настраивать макет в зависимости от ориентации устройства:

@media screen and (min-width:480px) and (max-width:800px) {
 /* Target landscape smartphones, portrait tablets, narrow desktops
 */
}
@media screen and (max-width:479px) {
 /* Target portrait smartphones */
}

Этот код позволяет настроить изменение сайта в зависимости от горизонтальной или вертикальной ориентации страницы, не указывая конкретные размеры в пикселях:

@media all and (orientation: landscape) {
 /* Target device in landscape mode */
}
@media all and (orientation: portrait) {
 /* Target device in portrait mode */
}

Атрибуты "height" и "device-height"

Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут "height" — он определяет высоту Viewport. Указывают целое неотрицательное значение "height" от 223px до 10000px или константу "device-height".

Если шаблон неадаптивный

Не рекомендуют использовать "initial-scale=1" для неадаптивных шаблонов — с такой установкой страница будет отображаться в масштабе 100%, в неадаптивном дизайне пользователю придется устанавливать масштаб вручную или прокручивать.

Не используйте "user-scalable=no" или "initial-scale=1" вместе с "maximum-scale=1" на неадаптивных шаблонах — это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта.

Если не использовать "viewport"

В теге или правиле "viewport" браузер находит инструкции для масштабирования страницы ресурса, а если его не указать, браузер покажет пользователю стандартный размер десктопной страницы, который обычно составляет 960+px, и попробует оптимизировать содержимое увеличением шрифтов и элементов. Он покажет контент, поместившийся на экране, а пользователю придется масштабировать страницу вручную или использовать горизонтальную прокрутку.

Такие страницы поисковики не будут считать удобными для мобильных пользователей, а значит они могут проигрывать конкурентам в выдаче. Мобилопригодность важна при ранжировании в Яндексе и Google. В 2016 году в Яндексе появился алгоритм «Владивосток», в 2018 — «Андромеда». Google перешел на mobile-first indexing для доступных сайтов: к 2023 году мобильная версия стала основной для индексирования. Робот должен видеть тот же полезный контент и ресурсы страницы, что и пользователь на смартфоне.

Поисковики распознают адаптивный дизайн сайта, если у робота будет доступ к ресурсам страницы — CSS, JavaScript и изображениям. Убедитесь, что доступ в файле robots.txt открыт.

Проверить мобилопригодность страницы

Проверить, адаптирована ли страница для мобильного просмотра, можно в Яндекс Вебмастере, в Chrome DevTools через режим устройств, а также в Lighthouse.

Отображение на мобильных устройствах в числе прочих тестов покажет «Анализ сайта» от PR-CY. Он оценит мобилопригодность по нескольким параметрам, покажет область просмотра на экране и даст советы по исправлению ошибок.

Мета-тег viewport остается общепринятым способом настройки области просмотра: его поддерживают современные браузеры и используют адаптивные сайты. Работа с этим тегом описана в том числе в документации Apple и в документации Android для разработчиков. CSS-правило @viewport, наоборот, считают устаревшим и ненадежным для новых сайтов.

FAQ по разделу

Где прописывать meta viewport?

Внутри блока <head> каждой HTML-страницы или в общем шаблоне сайта, если страницы собираются CMS или фреймворком.

Как проверить, есть ли viewport на странице?

Откройте исходный код или DevTools и найдите meta name="viewport".

Что делать, если я не вижу viewport?

Проверьте, что тег находится в <head>, не дублируется, не добавляется слишком поздно JavaScript-кодом и не закрыт от робота ошибками шаблона.

Сайты, не адаптированные для устройств с разными экранами, теряют трафик и заявки. Адаптивным будет сайт, если его контент удобно просматривать с любого устройства: для этого разработчики размечают область просмотра с помощью мета-тега viewport в HTML, используют медиазапросы CSS, гибкие сетки и проверяют страницу на реальных мобильных сценариях.