Что такое метатег viewport и как он используется

Как настроить и где прописать тег viewport

АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ

Инструкцию одобрил
SEO-специалист в Luxeo

Илья Беланенко

Метатег Viewport используется для адаптации сайта ко всем устройствам и задает правила отображения видимой области в мобильном браузере. Чтобы активировать тег, необходимо добавить его в раздел Head кода страницы, задав нужные параметры.

Что означает тег Viewport?

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

Эта же страница на смартфоне оказывается совсем неудобной для прочтения. Вам приходится двигать изображения и текст вправо и влево, вниз и вверх. Если задать тег Viewport, веб-страница примет нормальный вид:

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

При адаптивном дизайне ему будет удобнее читать текст, совершать покупки и переходить между разделами сайта. Чтобы веб-страница отображалась нормально на устройствах с разным разрешением, важно задать правильные настройки тега Viewport.

Настройки тега Viewport для разных устройств

В большинстве случаев строка с тегом Viewport выглядит так:

Первый параметр Width дает команду браузеру адаптировать по ширине страницу к устройству, на котором она открыта. Масштабирование ширины страницы определяется автоматически, если указано значение «device-width». Также можно установить числовое значение от 200 до 10000 пикселей. В этом случае параметр будет выглядеть так:

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

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

Например, возьмем для сравнения два смартфона с диагональю 3,5 дюймов, но разной плотностью пикселей. В первом этот показатель составляет до 200 пикселей, а во втором — более 300 пикселей. Одна и та же веб-страница будет выглядеть по разному на обоих смартфонах, несмотря на одинаковый размер экрана.

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

Еще один параметр — initial-scale — означает коэффициент масштабирования. Если указано значение «1», разрешение CSS и устройства приравниваются друг к другу независимо от размера экрана. Можно указать любое значение параметра от 0.1 до 10.

Как определить разрешение экрана конкретного устройства?

По плотности пикселей. При показателе менее 200 пикселей разрешение экрана будет равно фактическому (коэффициент CSS = 1). Если плотность больше 200, но меньше 300 пикселей — разрешение будет в 1,5 раза меньше фактического (коэффициент CSS = 1,5). При плотности более 300 пикселей разрешение определяется по формуле:

показатель плотности / 150 с округлением до целого числа

Например, в смартфоне Galaxy S3 показатель плотности пикселей составляет 233, а разрешение экрана 480x800. В данном случае коэффициент CSS = 1,5. Значит, фактическое разрешение будет в 1,5 раза меньше указанного и составит 320x533 пикселей.

В более современном Galaxy S5 плотность пикселей составляет 441, а разрешение экрана — 1080x1920. Так как плотность более 300, нужно разделить 441 на 150, после округления получится 3. Итоговое расширение — 360x640.

Где прописать тег Viewport?

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

height — задает высоту отображаемой для просмотра области. Можно указать константу device-hight, которая означает автоматическое масштабирование под размер экрана, или числовое значение от 200 до 10000 пикселей;
user-scalable — разрешает или запрещает пользовательское масштабирование страницы, задается значением Yes или No;
minimum-scale — минимальное значение масштаба (от 0,1 до 10);
maximum-scale — максимальное значение масштаба (от 0,1 до 10).

На практике это выглядит так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

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

Не все версии мобильных браузеров поддерживают тег Viewport. Opera Mobile Mini, Symbian, Openwave и некоторые другие версии старых браузеров не реагируют на команды Viewport. В этом случае оптимизация сайта для мобильных устройств может проводиться более старым методом, а именно через метатеги:

Метатег meta name mobileoptimized content в коде

Тег Viewport на сайтах WordPress можно задать без написания кода вручную. Для этого необходимо скачать и установить соответствующий плагин.

Заключение

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

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

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

Эта статья — часть модуля «Аудит сайта» в Serpstat

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

Запустить аудит сайта