Мета тег 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 — задает минимальный масштаб. Измеряется в вещественных числах.
<!— Запрещено увеличивать масштаб —>
<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″>