Viewport - масштабирование и область просмотра

Как правило, при настройке окна браузера под наше устройство, мы используем тег <meta name="viewport">. Метатег сообщает браузеру как именно подстроить размер страницы и ее масштаб.

Этот HTML-тег был впервые использован американской компанией Apple в iOS, а затем и другими платформами. Благодаря iOS и Android, он широко распространен, но как это ни странно, не включен в международный стандарт W3C.

Однако W3C  стремится к стандартизации нового метода адаптации, при котором управление масштабированием и разметкой перенесено из HTML в CSS. Поэтому рекомендуется использовать в сочетание с HTML-тегом CSS правило @viewport.

Атрибуты HTML-тега viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML-тег viewport может содержать следующие атрибуты и их значения:

• ширина области просмотра. Значение должно быть указано в пикселях или, что встречается чаще всего, шиспользуется переменная device-width, которая обозначает всю ширину экрана;
•  высота. Аналогично задается в пикселях или переменной device-height;
• scale - начальный коэффициент масштабирования страницы. По умолчанию (если параметр не задан) присваивается значение 1.0, что означает реальный размер пикселей без масштабирования;
• scalable - принимает два значения "yes" и "no", что соответственно означает, что пользователь может сам отмасштабировать интернет-страницу;
• scale и maximum-scale - минимальный и максимальный масштабы страницы. Принимают значения от 0.1 до 1.0.

CSS-правило viewport

Представляет собой точно такое же управление viewport, за исключением того, что параметры переносятся из разметки HTML в CSS-стили.

Пример использования:

Атрибуты и значения остаются те же.