Изначально мета-тег viewport появился в мобильной версии Safari, далее его подхвати остальные разработчики и мобильных браузеров, хотя он не является частью стандарта W3C.
Мета-тег размещается в <head> страницы и задает правила, как браузеру вписать страницу в ширину экрана мобильного телефона или планшета.
Для мобильных и адаптивных версий сайта используется следующие параметры:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width – говорит о том, что сайт резиновый и растягивается/сжимается на всю ширину экрана.
initial-scale=1 – устанавливает масштаб страницы, значение 1 = 100%, 1.5 = 150%.
Если сайт не имеет мобильной версии, то без viewport на мобильных устройствах он будет выводится с обрезанным фоном в правой части:
В таких случаях рекомендуется указать значение width равное ширине сайта, плюс 25-40px для отступов по бокам.
<meta name="viewport" content="width=1024>Результат:
Дополнительные параметры
minimal-scale=0.5– задаёт минимальный масштаб (50%)maximal-scale=1.5– устанавливает максимальный масштаб (150%)user-scalable=no– выключает возможность управлять масштабом.
Пример:
<meta name="viewport" content="width=device-width, user-scalable=no">В CSS есть правило @viewport подобное мета-тегу, но пока его использовать нет смысла т.к. браузеры Firefox и Safari его не поддерживают.
Подробнее на https://developer.mozilla.org.
Для адаптивных и мобильных сайтов:
@viewport {
width: device-width;
}Для фиксированных сайтов:
@viewport {
width: 1024px;
}
