В этой статье вы узнаете, что такое viewport и для чего нужен метатег viewport. Разберем, где и как подключить этот метатег, а также какие параметры используются для его настройки. Вдобавок научимся определять разрешение экранов с высокой плотностью пикселей.
Для чего нужен метатег viewport
Когда пользователь просматривает страницу веб-сайта на определенном устройстве, он может видеть конкретную область веб-страницы без прокрутки экрана. Такая область называется viewport.
В современном мире, где существует множество устройств с различными размерами экранов и плотностью пикселей, разработчикам необходимо следить за тем, чтобы веб-страницы отображались корректно на различных типах экранов. Веб-сайт, который отображается удобно для пользователя, например, на экране ноутбука, может вызвать затруднения при взаимодействии с ним на мобильных устройствах. К примеру, текст может быть недостаточно крупным для комфортного чтения либо пользователю может понадобиться скроллить страницу горизонтально, чтобы увидеть весь контент.
Рассмотрим пример простой страницы с текстом в теге p:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<p>Пример отображения текста на экранах различных устройств. Он должен быть удобочитаемым.</p>
</body>
</html> Так этот текст отображается на широком экране ноутбука:
А вот в таком виде он представлен на экране смартфона «iPhone 12 Pro»:
Как видно из последнего примера, такого рода текст прочитать невозможно. Браузер старается вместить страницу в пределы экрана, так как полагает, что она предназначена для десктопа. Пользователь с очень большой вероятностью просто закроет такую страницу.
Чтобы исправить эту ситуацию, добавим метатег viewport к странице нашего примера:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример</title>
</head>
<body>
<p>Пример отображения текста на экранах различных устройств. Он должен быть удобочитаемым.</p>
</body>
</html> Теперь текст на экране смартфона стал намного читабельнее:
Мы указали браузеру отображать веб-страницу для экранов небольшого размера. Далее разберем, как нам удалось добиться таких изменений и как еще можно управлять отображением страницы на различных экранах с помощью метатега viewport.
Подключение метатега viewport и его атрибуты
Метатег viewport подключается в блоке head страницы и имеет два атрибута — name и content.
Атрибут name служит для указания назначения метатега. Когда мы устанавливаем значение viewport для этого атрибута, мы сообщаем браузеру, что метатег относится к настройкам отображения области просмотра страницы.
Настройки области просмотра задаются в атрибуте content в виде пар ключ-значение, перечисленных через запятую. Самая популярная и универсальная запись метатега viewport для адаптивных страниц выглядит следующим образом:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Разметка веб-ресурса считается адаптивной, если она корректно и оптимально отображается на экранах различных размеров.
Здесь мы указываем, что ширина области просмотра идентична ширине экрана (width=device-width) и страница будет отображаться без изменения масштаба (initial-scale=1.0).
Подробнее об этих и других параметрах атрибута content:
width— устанавливает ширину области просмотра. Может принимать значения в виде ключевого словаdevice-widthлибо конкретного числа пикселей. Значениеdevice-widthзадает ширину видимой области равной ширине экрана устройства. Если указать значение в пикселях (например,600), то страница будет отображаться с фиксированной шириной области просмотра, независимо от фактической ширины экрана.height— определяет высоту видимой области. Значениями могут быть ключевое словоdevice-heightи число пикселей. При использовании ключевого словаdevice-heightвысота viewport подстраивается под высотку экрана. Фиксированная высота области просмотра задается с помощью количества пикселей. Параметрheightпрактически не используется.initial-scale— определяет начальное увеличение либо уменьшение видимой области после загрузки страницы. Значение является числом от0.1до10. Если значение равно1.0, то область просмотра будет отображаться без изменений масштаба. Отличное от1.0значение задаст отображение видимой области с соответствующим увеличением или уменьшением.user-scalable— управляет возможностью пользователей изменять масштаб отображаемой области на мобильных устройствах с использованием жестов. Принимает два значения:yes(можно изменять) иno(изменять запрещено). Значение по умолчанию —yes.minimum-scaleиmaximum-scale— управляют, соответственно, минимальным и максимальным уровнем масштабирования видимой области. Например, если установитьminimum-scaleравным0.5, пользователи смогут уменьшить область просмотра до половины начального размера, но не меньше. А при установкеmaximum-scaleравным2пользователи смогут увеличить страницу не более чем в 2 раза.
Примеры:
<!-- Установка минимального и максимального масштаба --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0"> <!-- Фиксированная ширина --> <meta name="viewport" content="width=600"> <!-- Запрет на масштабирование --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Как определить разрешения экрана
Появление экранов с высокой плотностью пикселей (например, Retina-дисплеев в устройствах Apple и аналогичных технологий в других устройствах) предоставило значительные преимущества в четкости и качестве отображения, но также добавило дополнительные сложности при отображении веб-страниц. Теперь экраны равных размеров могут иметь разное разрешение. Например, текст на экранах с высокой плотностью пикселей, по сравнению с экранами, где плотность пикселей обычная, выглядит намного мельче и читать его может быть неудобно.
С учетом этого для определения разрешения экрана используется параметр width=device-width атрибута content метатега viewport. Этот параметр приравнивает ширину видимой области к CSS-разрешению устройства, которое рассчитывается, исходя из плотности пикселей экрана. CSS-разрешение расчитывается следующим образом:
- при плотности пикселей меньше
200ppiфизическое и CSS-разрешение экранов будут равны; - если плотность пикселей находится в пределах
200ppi-300ppi, CSS-разрешение будет в 1.5 раза меньше физического; - расчет CSS-разрешения при плотности пикселей более
300ppiпроизводится по формулеплотность пикселей / 150с округлением до 2, 2.5, 3, 3.5 и так далее.
Заключение
Подведем итог. Viewport — это видимая область страницы на экране без ее прокрутки. Метатег viewport необходим для настройки области видимости при отображении на различных разрешениях экранов. Он подключается в блоке head веб-страницы. Для адаптивного дизайна в значении атрибута content метатега нужно прописать строку width=device-width, initial-scale=1.0. Также атрибут content имеет дополнительные параметры для настройки отображения. CSS-разрешение экранов с высокой плотностью пикселей определяется расчетами, в зависимости от физического разрешения.