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

Сообщить об ошибке

Отменить
32362
How-to Читать 8 минут

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

Как настроить и где прописать тег viewport
АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ
Инструкцию одобрил
SEO-специалист в Luxeo
Метатег Viewport используется для адаптации сайта ко всем устройствам и задает правила отображения видимой области в мобильном браузере. Чтобы активировать тег, необходимо добавить его в раздел Head кода страницы, задав нужные параметры.

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

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

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

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

Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! ;)
Что такое метатег viewport и как он используется 16261788256304
Персональная демонстрация
Оставьте заявку и мы проведем для вас персональную демонстрацию сервиса, предоставим пробный период и предложим комфортные условия для старта использования инструмента

Как подключить Viewport для разных устройств

Для начала ответим на вопрос: Viewport units что это? Для этого нужно понять, из чего состоит этот тег. В большинстве случаев строка с тегом Viewport выглядит так:
Настройка тега meta name 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>
В данном случае пользователь не сможет вручную масштабировать экран, а максимальный масштаб равен его фактическому значению.

Адаптивная верстка meta Viewport поддерживается не во всех версиях мобильных браузеров. Opera Mobile Mini, Symbian, Openwave и некоторые другие версии старых браузеров не реагируют на команды Viewport. В этом случае оптимизация сайта для мобильных устройств может проводиться более старым методом, а именно через метатеги:
Метатег meta name mobileoptimized content в коде
Meta теги Viewport на сайтах WordPress можно задать без написания кода вручную. Для этого необходимо скачать и установить соответствующий плагин.

Заключение

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

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

Для того чтобы работала адаптивная верстка meta, нужно добавить строчку с нужными параметрами в раздел Head каждой страницы сайта или установить соответствующий плагин для своей CMS.
Эта статья — часть модуля «Аудит сайта» в Serpstat
«Аудит сайта» в Serpstat" title = "Что такое метатег viewport и как он используется 16261788256306" />
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4.2 из 5 на основе 50 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.