Мета тег viewport, добавьте сайту адаптивности

Мета тег viewport ~ [ wwweb.uz ]

Обычный пользователь, я сам, да и многие другие, обычно не задумываются о том, как происходит «подгонка» страницы под какое-либо устройство. Однако даже эта, на первый взгляд, мелочь, имеет свою техническую реализацию.

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

Данная строка подсказывает браузеру, каким образом обрабатывать страницу, какой размер, масштаб и область страницы должны быть использованы для открывающего ее устройства (стационарный компьютер, ноутбук, планшет, смартфон и др.).

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

Мета-тег viewport размещается в между тегами <head>...</head>. Атрибуты мета-тега viewport указываются через запятую.

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

width — указывает ширину области просмотра.

Свойство width = 500 указывает браузеру отображать сайт по ширине в 500 пиксел.
Свойство width = device-width указывает браузеру отображать сайт по ширине текущего устройства.

height — указывает высоту области просмотра.

Свойство height = 500 указывает браузеру отображать сайт по высоте в 500 пиксел.
Свойство height = device-height указывает браузеру отображать сайт по высоте текущего устройства.

Для адаптивности сайта рекомендуется указывать width = device-width, при чем, если указан атрибут width, то атрибут height указывать необязательно.

initial-scale — указывает масштаб страницы.

Свойство initial-scale = 1.0 соответствует масштабу в 100%.

user-scalable — позволяет пользователю изменять масштаб. Принимает значения yes (по-умолчанию) и no.

minimum-scale — задает минимальный масштаб viewport.

maximum-scale — задает максимальный масштаб viewport.

minimum- , maximum-scale принимают значения от 0.1 до 10. Где 1.0 — не масштабировать.

Помимо мета-тега viewport различают следующие понятия:

  • layout viewport — это область, на которой размещены все элементы страницы.
  • visual viewport — это часть layout viewport-а, которая отображается в данный момент на экране.

Таким образом viewport задает размер layout viewport-а, для того, чтобы при открытии на мобильном устройстве, ширина viewport-a была задана наиболее удобным значением, обычно это device-width. В этом случае страница будет вписана в размер экрана.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *