Viewport — это область, которую пользователь видит на экране устройства при посещении сайта. Ранее было проще: экраны имели примерно одинаковое разрешение, и достаточно было задать одну ширину макета. Сейчас все изменилось: пользователи заходят с разных устройств, и разрешения экранов могут сильно различаться.
Для того чтобы страницы отображались удобно на всех устройствах, необходимо правильно управлять их масштабированием. Это и делает метатег viewport. Однако он не отвечает за адаптивность верстки, а лишь контролирует масштаб отображаемой страницы.
Чтобы понять, как работает этот метатег, давайте взглянем на пример.
Для начала создадим простой HTML-документ с двумя предложениями:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Timeweb is here</title>
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<p>Этот текст должен быть читаемым на всех устройствах без увеличения страницы жестами. Открыл и прочитал.</p>
</body>
</html>Теперь давайте посмотрим, как эта же страница будет выглядеть на экране смартфона.
Зачем так плохо? Потому что браузер считает, что страница предназначена для десктопа, и пытается вписать её в экран смартфона. Наверное, вы еще встречаете такие сайты, которые нужно масштабировать пальцами. Это уже устаревшая практика.
Теперь давайте добавим в код одну строку:
<meta name="viewport" content="width=device-width, initial-scale=1.0">И получим следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Эта строка изменяет масштаб -->
<title>Timeweb is here</title>
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<p>Этот текст должен быть читаемым на всех устройствах без увеличения страницы жестами. Открыл и прочитал.</p>
</body>
</html>Теперь обновим страницу и посмотрим, как она выглядит на экране смартфона.
Теперь текст читаем без необходимости увеличивать страницу жестами. Конечно, это еще не адаптивная верстка, но мы сделали первый шаг: указали браузеру, что страницу нужно оптимизировать для небольшого экрана.
Чтобы не воспринимать это как магию, давайте разберемся, как работает метатег viewport.
Физическое и CSS-разрешение экрана: как это работает
С появлением экранов с высокой плотностью пикселей разработчики столкнулись с новой задачей: при одинаковых физических размерах экранов смартфонов их разрешение может сильно отличаться. Это приводит к тому, что текст, который на одном устройстве отображается нормально, на другом может быть слишком мелким.
Метатег viewport помогает решить эту проблему с помощью двух ключевых параметров: `width` и `initial-scale`.
Параметр `width=device-width` задает ширину вьюпорта, равную CSS-ширине устройства. CSS — это абстракция, которая используется для того, чтобы адаптивный дизайн корректно отображался на разных экранах, несмотря на их физические различия.
Что такое CSS-разрешение?
CSS-разрешение зависит от плотности пикселей экрана:
- Если плотность пикселей меньше 200 ppi, коэффициент равен 1. Это означает, что CSS-разрешение экрана 320x480 пикселей будет точно соответствовать физическому разрешению.
- Плотность пикселей от 200 до 300 ppi дает коэффициент 1.5.
- Если плотность пикселей больше 300 ppi, коэффициент рассчитывается по формуле: плотность / 150, и округляется (например, 2, 2.5, 3 и т.д.).
Размер области просмотра для устройства можно найти на специализированных сайтах, чтобы не рассчитывать его вручную. Однако, из-за множества различных экранов, в большинстве случаев верстальщики используют универсальные значения.
Как правильно использовать метатег viewport
Для настройки области просмотра можно использовать несколько параметров:
- `width` — ширина области вьюпорта. Может быть задано как `device-width` (ширина устройства) или точное значение в пикселях, например, `320px`.
- `height` — высота области вьюпорта, аналогично ширине.
- `initial-scale` — коэффициент начального масштабирования. Диапазон от 0.1 до 10. Значение 1.0 — без масштабирования.
- `user-scalable` — позволяет ли пользователь изменять масштаб страницы жестами. Может быть `yes` (разрешено) или `no` (запрещено).
- `minimum-scale` и `maximum-scale` — минимальный и максимальный коэффициенты масштабирования.
Простейший и часто используемый вариант метатега viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Этот код сообщает браузеру, что ширина области просмотра равна ширине устройства, и изначально нет масштабирования. Это — оптимальный сценарий для большинства страниц.
Также можно задать конкретную ширину, например:
<meta name="viewport" content="width=980px, initial-scale=1.0">Когда фиксируется ширина в пикселях, например, 980px, появляется горизонтальный скролл, так как браузер пытается подстроить страницу под заданную ширину. Это неудобно, особенно если на странице много текста. Поэтому такие значения ширины рекомендуется использовать только для неадаптивных макетов.
Если ваш макет имеет фиксированную ширину, например, 1024 пикселя, можно указать её так:
<meta name="viewport" content="width=1024">Важно не запрещать пользователям масштабировать страницу, чтобы они могли приблизить контент, если это необходимо.
Изменение масштаба и предотвращение масштабирования
При использовании `initial-scale` можно задать коэффициент масштабирования страницы, например:
<meta name="viewport" content="initial-scale=5.0">Однако, следует быть осторожным с атрибутом `user-scalable`, который по умолчанию равен `yes`, позволяя пользователям масштабировать страницу. Спецификация HTML не рекомендует полностью запрещать возможность масштабирования, например:
<!-- ТАК ДЕЛАТЬ НЕ НУЖНО -->
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">Валидаторы HTML могут указать на ошибки при таком подходе, поэтому стоит внимательно подходить к решению, когда и как ограничивать возможность изменения масштаба страницы.
В спецификации HTML указано, что в некоторых случаях можно запретить масштабирование страницы, например, в картографических приложениях, где управление масштабом осуществляется через скрипты. Однако в большинстве случаев рекомендуется не ограничивать пользователю возможность масштабировать страницу.
Ошибка: значение метатега viewport не задано
Когда появляется сообщение о том, что значение метатега viewport не задано, это обычно означает, что инструмент проверки не нашел нужного метатега в коде страницы. Чтобы решить эту проблему, убедитесь, что метатег viewport правильно размещен в блоке `<head>`.
Как исправить ошибку:
1. Убедитесь, что метатег находится внутри тега `<head></head>`. Это критически важно, поскольку если метатег по каким-то причинам оказался в блоке `<body>`, то инструмент проверки может не обнаружить его.
2. Используйте панель разработчика в браузере для проверки страницы, а не оригинальный код. В исходном коде могут быть ошибки, которые могут сдвигать метатег в блок `<body>`, а в панели разработчика вы сразу увидите реальную структуру страницы.
Пример правильного размещения метатега:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Если метатег размещен корректно, с правильными атрибутами, и ошибка продолжает появляться, возможно, это проблема самого инструмента проверки. Вебмастера часто сообщают, что такие ошибки появляются в Яндекс и Google, хотя на самом деле метатег установлен верно.
Правильное использование метатега viewport критично для адаптивного дизайна, особенно для сайтов, созданных на платформе OpenCart. OpenCart предлагает готовые шаблоны, которые могут не всегда учитывать различные плотности пикселей экрана, что может повлиять на удобство просмотра. Внедрение метатега viewport помогает оптимизировать отображение страниц на мобильных устройствах, гарантируя, что контент будет четко виден и читабельный без необходимости масштабирования. Это особенно важно для интернет-магазинов на Opencart, так как оптимизация для мобильных устройств влияет на удобство покупок и повышает удовлетворенность пользователей.