Мета тег viewport в html — настройка области просмотра страницы

Мета тег viewport отвечает за область просмотра сайта на экране. Проще говоря — это настройка ширины экрана для сайта. Например, сайт на мониторе ПК будет корректно выглядеть, а на смартфоне будет плохо читаем, т.к. слишком мелкий шрифт.

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

Мета тег viewport позволяет настроить ширину области просмотра и масштаб страницы. По определению viewport — это видимая пользователю область сайта без прокрутки.

Синтаксис viewport

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>

Выше было указано только два атрибута width и initial-scale, которые отвечают за ширину и масштаб соответственно. Через запятую можно задать еще и другие параметры. Рассмотрим все возможные атрибуты.

width — устанавливает ширину области просмотра браузером. Принимает целочисленное значение (от 200 до 10000) в пикселях или device-width. Этот атрибут обязателен для адаптивных версток сайта.
height — устанавливает высоту области просмотра браузером. Принимает целочисленное значение в пикселях (от 200 до 10000) или значение device-height. Поскольку определяющим фактором является ширина, то высоту указывать не обязательно для адаптивной верстки.
initial-scale — коэффициент масштабирования. Принимает вещественные значения (от 0.1 до 10.0). Значение "1.0" стоит по умолчанию, что означает каждый физический пиксель соответствует аппаратному пикселю.
user-scalable — устанавливает можно ли пользователю масштабировать страницу. Принимает два значения: no/yes
minimum-scale — задает минимальный масштаб. Измеряется в вещественных числах.
maximum-scale — задает минимальный масштаб. Измеряется в вещественных числах.

Примеры с viewport


    <!-- Запрещено увеличивать масштаб -->
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
     
    <!-- Разрешено изменять масштаб -->
    <meta name="viewport" content="width=device-width, user-scalable=yes">
     
    <!-- Задание ширины просмотра в 1600 пикселя -->
    <meta name="viewport" content="width=1600">

Как связан физический и аппаратный пиксель

Новые смартфоны имеют высокое разрешение. В связи с этим надо делать уточнению по атрибуту initial-scale, который отвечает за масштабирование. Дело в том, что делая масштаб 1.0, мы добьемся слишком маленького текста, который невозможно будет читать. Поэтому применяется следующая таблица при преобразовании масштаба для устройств с высокой плотностью пикселей.

Плотность пикселей экрана	CSS коэффициент
< 200 ppi (меньше)	1.0
В диапазоне 200..300 ppi	1.5
> 300 ppi (больше)	плотность/150 (округление с точностью до 0.5)

← Перейти в каталог html уроков и советов