Метатег viewport был разработан для того, чтобы
указывать браузерам на то, в каком масштабе необходимо отображать
пользователю видимую область веб-страницы.
Viewport - это видимая пользователю область веб-страницы (то, что может увидеть пользователь, не прибегая к прокрутке).
Размеры этой области определяются размером экрана устройства.
Настройка meta viewport для адаптивных веб-страниц
Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">
Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить.
Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.
Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:
width=device-width
initial-scale=1
Параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width). Данная ширина (CSS) - это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.
Параметр initial-scale устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.
Ресурсы для более глубокого изучения:
https://metanit.com/web/html5/11.2.php
https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works
Комментариев нет:
Отправить комментарий