Метатег Viewport
Основа адаптивного дизайна - метатег viewport.
Вся видимая область на экране браузера описывается понятием Viewport. Viewport представляет область, в которой веб-браузер отображает веб-страницу.
По умолчанию браузер устанавливает область видимости.для десктопов. А обычной шириной десктопного сайта можно считать 980 пикселей. При отображении сайта на экранах с меньшим параметром, таких как смартфон, планшет, смартчасы и т.д, будет применятся маштабирование страницы. И многие элементы будут крайне малого размера. При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей. Другие браузеры могут поддерживать в качестве начальной ширины другие значения. Т.е они также будут выполнять масштабирование. Чтобы исправить ситуацию, следует использовать метатег viewport.
Он имеет следующее определение:
<meta name="viewport" content="параметры_метатега">
В атрибуте content мета-тега определяются следующие параметры:
| Параметр | Значения | Описание |
| width | Принимает целочисленное значение в пикселях или значение device-width | Устанавливает ширину области viewport |
| height | Принимает целочисленное значение в пикселях или значение device-height | Устанавливает высоту области viewport |
| initial-scale | Число с плавающей точкой от 0.1 и выше | Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования |
| user-scalable | no/yes | Указывает, может ли пользователь с помощью жестов масштабировать страницу |
| minimum-scale | Число с плавающей точкой от 0.1 и выше | Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования |
| maximum-scale | Число с плавающей точкой от 0.1 и выше | Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования |
Используя параметр width=device-width, веб-браузер понимает, что в качестве начальной ширины области viewport надо считать непосредственную ширину экрана устройства. И тогда веб-браузер не будет проводить никакого масштабирования, так как у нас ширина viewport и ширина экрана девайса одинаковы.
Пример, запретить пользователю масштабировать размеры страницы: <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">