Современные сайты должны быть удобными на любых устройствах вне зависимости от размера экрана. Для этого веб-разработчики используют в html метатег для мобильных устройств Viewport. Он считается одной из составляющих адаптивного дизайна. Рассказываем все о теге Viewport – где прописать и как.
Вьюпорт – это
Область браузера на дисплее, которую посетитель сайта видит без прокруток. Дословно «viewport» переводится как «окно просмотра». Раньше эта область была примерно одинаковой. Сейчас появилось очень много мобильных устройств с разными размерами и разрешениями рабочей области. Чтобы сделать более комфортным использование веб-ресурса владельцам разнообразных гаджетов, его страницы масштабируют. Для этого используют Viewport – это метатег в HTML, который отвечает за контролирование масштаба отображения веб-страницы.
При этом важно понимать, как работает Viewport – тег не адаптирует страницу сам, а только сообщает браузеру, что страницу нужно отобразить по определенным правилам.
Как настроить Viewport?
Как и любой другой html тег для мобильных устройств, этот тег может иметь несколько атрибутов. Рассмотрим их все, чтобы понимать, как правильно прописать их в коде:
- width. Определяет ширину обзорной области так, чтобы она была равна ширине дисплея;
- height. Определяет высоту вьюпорта. Может принимать значение константы device-height или любое значение от 200 до 10 тыс. пикселей;
- initial-scale. Определяет начальный масштаб страницы. Атрибут может быть прописан в числе от 0.1 до 10, где 1.0 – отсутствие масштабирования в принципе;
- user-scalable. Он может, как запретить масштабирование сайта жестами, так и разрешить его. Задается с помощью отдельно прописанных значений (No или Yes);
- minimum-scale. Определяет самый маленький масштаб (цифровые показатели такие же как initial-scale);
- maximum-scale. Определяет самый большой масштаб.
Некоторые из устаревших мобильных браузеров (такие как Symbian, Opera Mobile Mini, Openwave и прочие) не знают, что такое вьюпорт и не масштабируют сайты.
Viewport – где находится?
Для отображения любого сайта на мобильных устройствах важен тег Viewport. Куда писать его? Вьюпорт размещают внутри блока <head></head> каждой из веб-страниц, которую нам нужно подстроить под необходимое разрешение экрана. Его указывают в таком виде – <meta name=»viewport» content=»…»>, где на месте троеточия прописываются необходимые атрибуты и их значения. Также метатег viewport добавляют в CSS.
Нередко при проверке html-кода валидаторами веб-разработчики видят сообщение, что значение тега viewport не задано. Для исправления этой ошибки нужно убедиться, что его разместили внутри блока Head, а head тег закрыт по всем правилам.
Чтобы знать больше про вьюпорт, можно пройти обучение по направлению веб-разработка в Компьютерной школе Hillel. Опытные менторы, работающие в топовых IT-компаниях, расскажут, что такое теги в телефоне, как создавать прототипы сайтов и многое другое. Полученные знания помогут новичкам успешно стартовать в IT-сфере, а опытным специалистами – прокачать скилы для движения вверх по карьерной лестнице.
По материалам: https://itwiki.dev/ru/