Мета-тег viewport

Изначально мета-тег viewport появился в мобильной версии Safari, далее его подхвати остальные разработчики и мобильных браузеров, хотя он не является частью стандарта W3C.

Мета-тег размещается в <head> страницы и задает правила, как браузеру вписать страницу в ширину экрана мобильного телефона или планшета.

Для мобильных и адаптивных версий сайта используется следующие параметры:

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

width=device-width – говорит о том, что сайт резиновый и растягивается/сжимается на всю ширину экрана.

initial-scale=1 – устанавливает масштаб страницы, значение 1 = 100%, 1.5 = 150%.

Если сайт не имеет мобильной версии, то без viewport на мобильных устройствах он будет выводится с обрезанным фоном в правой части:

В таких случаях рекомендуется указать значение width равное ширине сайта, плюс 25-40px для отступов по бокам.

<meta name="viewport" content="width=1024>
HTML

Результат:

Дополнительные параметры

  • minimal-scale=0.5 – задаёт минимальный масштаб (50%)
  • maximal-scale=1.5 – устанавливает максимальный масштаб (150%)
  • user-scalable=no – выключает возможность управлять масштабом.

Пример:

<meta name="viewport" content="width=device-width, user-scalable=no">
HTML

В CSS есть правило @viewport подобное мета-тегу, но пока его использовать нет смысла т.к. браузеры Firefox и Safari его не поддерживают.

Подробнее на https://developer.mozilla.org.

Для адаптивных и мобильных сайтов:

@viewport {
	width: device-width;
}
CSS

Для фиксированных сайтов:

@viewport {
	width: 1024px;
}
CSS

Поддержка CSS @viewport:

22.01.2020, обновлено 28.05.2021
6597

Комментарии

, чтобы добавить комментарий.

Другие публикации

Ссылки на мессенджеры с сайта
HTML ссылки для открытия чата и других функций популярных мессенджеров.
18732
+13
Адаптивные блоки YouTube
Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width="100%", то он растянется на всю ширину родителя, но для высоты hight="100%" не работает.
5832
+3
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
35812
+10
Адаптивные плееры Youtube на десктопах и мобильных
Проблема плеера в том что у него нефиксированные размеры, поэтому возникают трудности на адаптивных сайтах. Ширину...
4702
+5
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
13642
+2
Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
47315
+11