Мета-тег 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
5659

Комментарии

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

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

Адаптивные блоки YouTube
Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width="100%", то он растянется на всю ширину родителя, но для высоты hight="100%" не работает.
5051
+3
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
33053
+10
Адаптивные плееры Youtube на десктопах и мобильных
Проблема плеера в том что у него нефиксированные размеры, поэтому возникают трудности на адаптивных сайтах. Ширину...
4049
+5
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
10695
+1
Обработка изображений в PHP
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать часть изображения и т.д.
44447
+11
Рекомендации по SEO настройке сайта
Сборник рекомендаций по настройке сайта помогающий исключить проблемы при индексировании поисковыми системами.
6561
+4