Мета-тег Viewport отвечает за масштабирование и адаптацию дизайна сайта на мобильных устройствах. Установил я однажды новую тему Вордпресс, а на телефоне-андроиде все содержимое сбилось влево в тонкую колонку на главной странице, притом что отдельные записи отображались корректно. Пришлось зайти в код и долго копаться там в поисках ошибки. И нашлась она в файле header.php — viewport……. minimal-scale=1. Оказалось, что в вьюпорт было прописано не только значение initial-scale=1 (что является нормой), но и minimal-scale=1. Слишком низкое значение minimum-scale (минимальная граница масштабирования) приводит к искажению макета. Но здесь значение 1 предполагало отсутствие масштабирования. Если масштабирования нет, то особой пользы мета-тег не несет. Пришлось полностью убрать строку minimal-scale=1, и все в макете встало на свои места.

Значения maximum-scale и minimum-scale

maximum-scale имеет предельное значение 1.0, означающее, что масштабировать сайт не нужно. Его нижний лимит — 0.1. Теоретическая подпитка minimum-scale

такая же: максимальный масштаб размера viewport задает число с плавающей точкой от 0.1. Напомним, что данный вид адаптации относится к технической информации, значит прописывать все, связанное с вьюпорт, нужно в разделе head сайта. Разница между разделами head и body сайтов, написанных на html, состоит в том, что “голова” содержит всю закулисную информацию технического характера, которая прямо не дана для просмотра читателю, а в body заносится текст зарисей, div-блоки и прочие составляющие, где будет мало “невидимых” тегов и их значений, в основном — зрительно видимая часть сайта.

Атрибут user-scalable

Атрибут user-scalable метатега viewport имеет значения yes или no. Они показывают, сможет ли пользователь движением пальцев менять масштаб страницы на мобильном устройстве. У user-scalable также бывает значение 1.0, которое позволяет пользователю увеличивать или уменьшать текст движениями руки.

initial-scale — сердцевина viewport

initial-scale — коэффициент масштабирования начального размера viewport. Представляет собой основной рычаг воздействия на отображение дизайнерского решения онлайн-ресурса на неадаптивных и адаптивных окнах браузера. Чтобы после открытия и прокрутки страницы на мобильном телефоне отпала необходимость двигать текст и картинки вправо и влево с целью рассмотреть полностью их содержание, нужно оптимизировать внешний вид через initial-scale метатега viewport.

Значение initial-scale — первое, что прописывают, когда вносят тег viewport в код сайта. 1.0 — оптимальное значение для него, подстраивающее ширину экрана под пользовательское устройство. Выглядит в коде это одной строкой так:

<meta name=”viewport” content=”initial-scale=1.0″>

После вьюпорт допустимо прописывать и такую комбинацию: content=”width=device-width, initial-scale=1.0. Убедиться в верности написанного в скрипте помогает тестирование на разных телефонах и планшетах. Пользовательский интерфейс нередко отличается, обнажая ряд проблем, связанных с его элементами или адресной строкой.