Meta name viewport

Для настройки окна браузера можно использовать специальный тег HTML следующего вида: <meta name=»viewport»>. Однако следует учесть, что в официальный стандарт W3C он не включён — его впервые ввела в iPhone компания Apple, а вслед за ней и остальные компании — поставщики браузеров. Мета-тег сегодня активно используется, благодаря возросшей популярности Android, iOS и остальных платформ, на которых работают смартфоны и планшеты.

Исключительное предназначение «Meta name viewport» — для настройки разметки страницы, поэтому его можно отнести к CSS, чего и хотят добиться в стандарте W3C. В статье мы рассмотрим использование мета-тега Viewport в html.

Viewport

Проведём небольшой эксперимент — сделаем элементарную html-страницу со следующей разметкой:

<!doctype html> 
<html> 
<head> 
    <title>Welcome, USER!</title> 
</head> 
<body> 
    <p>Welcome, USER!</p> 
</body> 
</html>

Сохраним её и откроем в смартфоне:

Страница в мобильном без использования мета-тега Viewport

Текст с заголовке странице отображается нормально, а текст в теле страницы — очень мелкий, для его прочтения нужно будет воспользоваться двумя пальчиками для увеличения. О пользователях, то есть потенциальных посетителях, подобной странички нужно позаботиться, чтобы текст был удобочитаемый и остальной контент отображался в нужной нам форме. Разместим в шапке странички тег Вивпорт:

<!doctype html> 
<html> 
<head>
<meta name="viewport" content="width=device-width">
    <title>Hello world!</title> 
</head> 
<body> 
    <p>Hello world!</p> 
</body> 
</html>

и заново откроем её:

tranica-v-mobilnom-s-viewport

Текст хорошо читается, страница отображается корректно. Почему так?

Браузеры стационарных компьютеров и браузеры на планшетах, мобильниках и смартфонах в-первую очередь различаются размерами экранов. На мобильниках сайты, созданные для домашних ПК, априори отображаются несколько хуже, чем мы этого хотим. Отображается только некоторая часть страницы, умещающаяся на экране, например, так:

chast-stranici

или уменьшается масштаб, при этом текстовая информация и другое содержимое страницы становиться очень мелкого размера — это показано на первом рисунке.

Уменьшение масштаба и частичное отображение несёт в себе определённый смысл, так как мобильный браузер, видя страницу, определяет, что она предназначена для стационарного ПК. Это «определение» верно для значительного числа интернет-сайтов. Далее, он устанавливает ширину в 980 пикселей (указано для Safari) для всей интернет-страницы и начинает максимально уменьшать масштаб, чтобы наилучшим образом показать её на экране. Открывая такие сайты мы видим их полностью умещёнными по ширине в экран, но в несколько раз меньше своих реальных размеров.

Используя мета-тег Вивпорт, мы оптимизируем страницы для смартфонов и задаём правила, благодаря которым область просмотра «будет вести себя правильно». В рассмотренном примере, значение «device-with» указывает браузеру устройства, что область просмотра имеет такую же ширину, что и ширина самого устройства. Если эта ширина экрана устройства равна 300 пикселей, то можно указать width=300px, но смартфоны разные и использовать «device-with» оптимальней.

Можно указать начальный масштаб страницы и её запретить масштабирование. Рассмотрим пару вариантов:

1.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Здесь мы имеем указание — ширина страницы равна ширине устройства (width=device-width), начальный масштаб (initial-scale=1.0), максимальный масштаб (maximum-scale=1.0) и запрет для пользователя на изменение масштаба (user-scalable=no).

2.

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

Это более простой и распространённый вариант.

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

Устаревшие модели смартфонов не поддерживают относительно новый мета-тег Вивпорт. Для них есть:

<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>

и другие.

Параметры Viewport

  • Определение ширины — «width». Можно указывать целое положительное значение от 200 до 10 тысяч пикселей, или использовать постоянное специальную константу, которую мы уже рассмотрели «device-width». Если константа или значение не будет указано, то будет использовано значение по-умолчанию: для Opera — 850, для Safari — 980, для Android Webkit — 800, а для IE — 974 пикселя.
  • Определение высоты «height». Можно задавать значение от 223 до 10 000 пикселей, или указать константу «deviceheight», но лучше вообще игнорировать.
  • Определение начального масштаба страницы «initial-scale». Используется целое число от 0,1 до 10. Если указано 1.0 — масштабирование производиться не будет. Если 2 — увеличение в 2 раза.
  • Разрешение пользователю на изменение масштаба «user-scalable». Принимает только два значения — да («yes») или нет («no»), последнее — запрет на изменение.
  • Минимальный и максимальный масштабы «minimum-scale» и «maximum-scale». Указывается в виде чисел от 0,1 до 10. Если 1.0 — масштабирование запрещено.

Такой вот тег!)

1 Комментарий

  1. Zawer:

    Так и не понял, как именно настроить тэг так чтобы сайт нормально открывался на моб. устройстве.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *