Русский
English
SEO-кухня
17.08.2022
Для чего используется мета-тег viewport и как его настроить
Что такое viewport и для чего используется meta name viewport: основные атрибуты и характеристики. Как настроить значение мета-тега: пошаговая инструкция с примерами. Что делать, если значение не задано. Как проверить адаптивность страницы.
В статье рассказываем, что такое метатег viewport и зачем он нужен, а в конце — ссылки на ресурсы, где можно проверить, правильно ли указан метатег и нет ли ошибок в отображении контента.
Что такое метатег viewport и зачем он нужен
Viewport (с англ. «окно просмотра») — это видимая пользователю область веб-страницы, которую он может просмотреть без прокрутки.
Область просмотра пользователя на десктопе
Одноимённый метатег viewport нужен для того, чтобы сообщить браузеру, как изменять масштаб страницы в зависимости от размера устройства пользователя.
Контент вылезает за размеры экрана
А так:
Контент адаптирован под размер экрана
Атрибуты метатега viewport
У метатега есть свои атрибуты — специальные команды, которые сообщают определённые параметры метатега.
Как «читать» исходный код страницы: теги и атрибуты, важные для SEO
Эти команды передаются с помощью атрибута content. Все указанные внизу значения meta viewport будут вписаны в атрибут content через запятую, например, так:
<meta name="viewport" content="width=device‑width, height=device‑height, initial‑scale=1.0, maximum‑scale=1.0, minimum‑scale=1.0, user‑scalable=no">
Width
Определяет, какая ширина будет у области просмотра:
-
если значение атрибута device‑width, то ширина страницы подстроится под ширину экрана;
-
если значение в пикселях, например 400, атрибут укажет браузеру всегда отображать страницу шириной 400 пикселей. Атрибут может принимать значение от 200 до 10 000 пикселей;
-
если значение атрибута не указано, будет по умолчанию приниматься такое значение: в Safari с мобильного — 980 px, Opera — 850 px, Android WebKit — 800 px, IE — 974 px.
Если у сайта есть адаптивный дизайн, рекомендуется использовать значение width=device‑width
Height
Определяет, какая высота будет у области просмотра. Указывать его не обязательно, если уже указан атрибут width, так как браузер сохранит соотношение сторон.
Если выставить значение атрибута device‑height, то высота сайта подстраивается под высоту экрана. Но атрибуту можно присвоить и точное значение от 233 до 10 000 пикселей, например 800 пикселей. Тогда высота страницы будет постоянной.
Initial‑scale
Передаёт начальный масштаб страницы. Указывает, во сколько раз область просмотра станет больше или меньше по сравнению с её исходным значением.
Значение атрибута может быть от 0,1 до 10. Если указать 1,0, область просмотра масштабируется под размер экрана 1:1.
User‑scalable
Разрешает или запрещает пользователям приближать и отдалять страницу.
Если user‑scalable имеет значение «yes», масштабировать можно, если «no» — нельзя. По умолчанию значение user‑scalable всегда «yes», поэтому его можно не указывать.
Minimum‑scale и maximum‑scale
С их помощью можно задать минимальный и максимальный масштаб: minimum‑scale и maximum‑scale от 0,1 до 1,0. Значение 1,0 говорит браузеру «не масштабировать».
Минимальный и максимальный масштаб используют, чтобы изменить настройки браузеров. Например, масштаб браузера Safari по умолчанию 0,25. Его можно изменить, если задать minimum‑scale или maximum‑scale.
Как настроить масштаб страницы через метатег viewport
Метатег указывают в HTML‑коде каждой страницы в разделе <head></head> в таком виде:
<meta name="viewport" content="...">
Внутри атрибута content описываются все необходимые значения через запятую. Например:
Как подобрать масштаб
Экраны гаджетов имеют два типа разрешений:
- физическое — можно измерить;
- CSS — величина, которая зависит от плотности пикселей.
У разных смартфонов может быть одинаковое физическое разрешение, но CSS‑разрешения будут различаться. Тогда одна и та же страница на одном устройстве отображается нормально, а на втором — с маленьким нечитаемым текстом.
Чтобы такого не допустить, используют атрибуты width и initial‑scale:
-
первый атрибут подгонит область просмотра под CSS‑ширину любого девайса. Записывают атрибут со значением device‑width так: width=device‑width;
-
второй атрибут увеличит масштаб в несколько раз через коэффициент, и текст не будет мелким:
-
если у экрана 200 ppi, то коэффициент 1;
-
если у экрана 200‑300 ppi — коэффициент 1,5;
-
если у экрана больше 300 ppi, коэффициент считают так: плотность пикселей делят на 150, а результат округляют.
-
Увидеть, как width=device‑width влияет на то, как выглядит страница, можно на примере ниже с iPhone 6. Слева страница подстроилась под размер экрана, но шрифт мелкий. Справа та же страница, но с width=device‑width и с initial‑scale=1. Текст крупнее, читать стало удобнее:
Как настроить отображение в зависимости от ориентации экрана
Если пользователь открывает страницу на смартфоне, он может менять её ориентацию, когда переворачивает смартфон в горизонтальное положение. В этот момент некоторые гаджеты увеличивают масштаб по умолчанию. Чтобы масштаб не «прыгал», используют атрибут initial‑scale и задают ему значение 1.
Другой способ запретить устройству менять масштаб — использовать атрибут maximum‑scale. Если задать ему значение 1,0, то при переключении ориентации масштаб не будет меняться.
Как проверить адаптивность страницы
Через Google
После настройки meta viewport можно проверить, как отображается страница на мобильных экранах, не появляется ли полоса прокрутки. Это можно сделать через инструмент «Проверка оптимизации для мобильных» от Google.
Если страница в порядке, появится такой результат:
Если нет, сервис перечислит ошибки, которые нужно исправить:
Через Яндекс.Вебмастер
Заходите в Вебмастер → Инструменты → Проверка мобильных страниц, указываете ссылку на сайт и нажимаете «Проверить». Загружается отчёт.
Отчет проверки мобильных страниц в Яндекс.Вебмастере
Если в вёрстке есть ошибки, они попадут в отчёт. Иногда бывает так, что метатег viewport указан, а внизу все равно горизонтальная прокрутка. Значит, какой‑то контент не поместился в область просмотра. Надо проверить вёрстку сайта и то, правильно ли записан метатег.
Вкратце
-
Viewport используют, чтобы область просмотра страницы совпала с размером экрана пользователя. В этом случае страница выглядит нормально на любом экране: не расползается, не сужается, не убегает под скролл.
- Метатег прописывают на каждой странице в разделе <head></head> со специальными значениями атрибутов — командами, которые управляют метатегом. Среди них:
- width — даёт браузеру указания, как подстроить страницу под разрешение экрана.
- height — определяет, какая высота будет у области просмотра.
- initial-scale — указывает, во сколько раз увеличить масштаб по сравнению с начальным вариантом.
- user-scalable — разрешает или запрещает пользователям приближать или отдалять страницу.
- minimum-scale и maximum-scale — меняют настройки браузеров.
- Проверить работу viewport можно в Google Search Console или в Яндекс.Вебмастере.