Технологии

Что такое Viewport?

Современные сайты должны быть удобными на любых устройствах вне зависимости от размера экрана.

Published

2 года ago

1 декабря, 2022

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