-
meta-tegi.ru

Мета-тег Viewport

Мета-тег ViewPort предназначен для указания мобильным браузерам, как правильно масштабировать страницу. Он позволяет решить серьезную проблему отображения: ранее браузеры мобильных устройств просто сжимали страницу до ширины своего экрана. Все элементы при этом пропорционально уменьшались, а текст становился нечитабельным. Теперь вебмастер может принудительно указать соотношение вьюпортов (областей просмотра) устройства и страницы, а также ограничить пределы масштабирования.

Идея мета-тега ViewPort была предложена компанией Apple, чтобы ускорить популяризацию интернета на мобильных устройствах. Не совсем понятно, почему директива, управляющая отображением, была помещена в тело страницы, а не в CSS. Вероятно, разработчики хотели сделать данный инструмент более гибким, оставив возможность динамически изменять его при генерации страницы.

Если область просмотра не указана, мобильный браузер использует стандартное значение для ПК. При этом разные платформы не придерживаются единого стандарта (для iPhone это 980px, а для Android-устройств – 800px). В результате на экране шириной 320px даже адаптивный сайт отобразится так, словно реальная ширина экрана составляет 980 px. Масштаб при этом будет уменьшен до 30%, из-за чего текст станет нечитаемым.

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

Синтаксис мета-тега ViewPort:

Как и остальные мета-теги, вьюпорт прописывается в блоке HEAD и содержит 2 поля: name (название тега) и content (список атрибутов со значениями через запятую).

Пример записи:

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

Используемые атрибуты:

  • width – ширина вьюпорта. Для адаптивных шаблонов обычно используется браузерная константа device-width, позволяющая корректно отобразить страницу с адаптивной версткой на всех устройствах, поддерживающих мета-тег ViewPort. Допустимы также числовые значения от 200 до 10000. Например, для неадаптивного сайта, сверстанного под ширину 1024 пикселя, можно указать width=1024px, и тогда он более корректно отобразится на iPhone со стандартным вьюпортом 980px.
  • height – высота вьюпорта. В большинстве случаев данный атрибут не используется, но может понадобиться, если мы хотим сделать из нашей страницы своеобразное веб-приложение без вертикальной прокрутки.
  • minimum-scale, maximum-scale – пределы масштабирования. Задаются числами от 0.1 до 10. В браузере iPhone значения по-умолчанию составляют 0.25 и 1.6 соответственно.
  • initial-scale – масштаб при загрузке страницы. Если не задан, то устанавливается браузером так, чтобы уместить страницу по ширине. Возможные значения – от 0.1 до 10. Типичное значение для адаптивных страниц – 1.0, для неадаптивных атрибут обычно не используется.
  • user-scalable – разрешение масштабирования. Возможные значения «yes» (по умолчанию во всех мобильных браузерах) и «no». Запрет пользовательского масштабирования используется крайне редко (например, в страницах-приложениях) и требует серьезной проверки на большинстве мобильных платформ.

Читайте также:

Мета-тег Title
Мета-тег Description
Мета-тег Keywords
Мета-тег Robots