Viewport мета тег

Автор Макс Пуля

Viewport мета тег Viewport мета тег

Тег <meta name="viewport" content="width=device-width"> быстрая оптимизация сайта для просмотров на смартфоне.

С появлением смартфонов и мобильных браузеров нужно было как-то адаптировать сайты на мобильных устройствах, причем быстро. Поэтому разработчики браузеров придумали и внедрили мета тег Viewport.

Текст на не адаптированном дизайне сайта слишком мелкий и очень тяжело его читать и воспринимать, нужно постоянно "гладить" экран, увеличивая текст на сайте, а также перемещаться вправо, когда читаешь. Это очень не удобно. Мета тег Viewport решает эту проблему.

Правильное написание мета тега Viewport

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

Таким образом, мы сообщаем браузеру, что область просмотра содержимого сайта (контента) должна быть равна ширине экрана смартфона или другого мобильного устройства. А также, что масштабировать содержимое не нужно.

Вот скриншот экрана мобильного устройства без мета тега Viewport, точнее он закомментирован:

скриншот экрана мобильного устройства без мета тега Viewport

Если вы читаете это с мобильного устройства - вот ссылка на демо.

А вот тот же сайт, только с использованием мета тега Viewport:

скриншот экрана мобильного устройства с использованием мета тега Viewport

Если вы читаете это с мобильного устройства - вот ссылка на демо.

Доступные параметры и значения мета тега Viewport

width

Доступные значения от 200px до 10000px. Или можно использовать ширину устройства device-width. По умолчанию, если ширина не задана, то она имеет следующие параметры: мобильный Safari - 980px, Opera - 850px, Android WebKit - 800px, Internet Explorer - 974px.

height

Доступные значения от 223px до 10000px. Или можно использовать высоту устройства device-height. Обычно этот параметр вообще не указывают в написании кода.

initial-scale

Доступные значения от 0.1 до 10. Это масштаб страницы. Значение 1.0 или просто 1 - означает без масштабирования. Чем больше значение initial-scale - тем больше масштаб.

user-scalable

Доступные значения no или yes. Параметр определяет можно ли посетителю изменять масштаб страницы. По умолчанию параметр user-scalable установлен как yes.

minimum-scale и maximum-scale

Доступные значения от 0.1 до 10. Параметр определяет минимальные и максимальный масштаб, который может изменить для себя посетитель страницы. Значение 1.0 или просто 1 - означает без масштабирования. Значения по умолчанию в мобильном браузере Safari minimum-scale="0.25", а maximum-scale="1.6".

Вот такой полезный мета тег Veiwport сделает ваш сайт более привлекательным при просмотре на мобильных устройствах.

Всем удачи и добра!

Макс Пуля

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.