Viewport мета тег
Автор Макс ПуляТег <meta name="viewport" content="width=device-width"> быстрая оптимизация сайта для просмотров на смартфоне.
С появлением смартфонов и мобильных браузеров нужно было как-то адаптировать сайты на мобильных устройствах, причем быстро. Поэтому разработчики браузеров придумали и внедрили мета тег Viewport.
Текст на не адаптированном дизайне сайта слишком мелкий и очень тяжело его читать и воспринимать, нужно постоянно "гладить" экран, увеличивая текст на сайте, а также перемещаться вправо, когда читаешь. Это очень не удобно. Мета тег Viewport решает эту проблему.
Правильное написание мета тега Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
Таким образом, мы сообщаем браузеру, что область просмотра содержимого сайта (контента) должна быть равна ширине экрана смартфона или другого мобильного устройства. А также, что масштабировать содержимое не нужно.
Вот скриншот экрана мобильного устройства без мета тега 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 и выражайте свои мысли.
Последнее от Макс Пуля
- $100 длиной в 2,5 года: доход сайта AdSense за два с половиной года
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры