Технологии
Что такое Viewport?
Современные сайты должны быть удобными на любых устройствах вне зависимости от размера экрана.
Современные сайты должны быть удобными на любых устройствах вне зависимости от размера экрана. Для этого веб-разработчики используют в 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/