Основное предназначение метатега Viewport

Viewport – это та часть веб-сайта, которую может видеть пользователь до того момента, пока не он прибегнет к прокрутке.

Все мы знаем, то размеры такой области определяются параметрами дисплея. Наименьшей область просмотра отличаются смартфоны, а самой большой – компьютеры, диагональ которых часто превышает двадцать четыре дюйма.

До того момента, как на рынке возникли смартфоны, страницы, как правило, просматривали на мониторах компьютеров. Viewport таких дисплеев хоть и различался, но не так кардинально. С целью создания веб-ресурсов до момента появления умных телефонов в большинстве случаев применяли резиновую или, как её ещё иной раз называют, гибкую разметку.

После возникновения смартфонов и планшетов Viewport одних гаджетов начал кардинально отличаться от Viewport иных девайсов. Это привело к тому, что веб-ресурсы, которые создавались для компьютеров, оказалось весьма проблематично листать на смартфонах. Для решения подобной проблемы была создана адаптивная разметка, которую можно настраивать под любые габариты дисплея. Создание адаптивной разметки происходит посредством медиа запросов, и на сегодняшний день её поддерживают все самые популярные браузеры.

Однако некоторые сложности начались и с адаптивной разметкой после того, как на рынке возникли девайсы со значительной плотностью пикселей, а значит, и с большим разрешением. Корпорация Apple создала Метатег viewport, читайте о нём детальнее тут, дабы подсказывать браузерам, в каком именно масштабе нужно отобразить пользователям видимую зону веб-ресурса. Иными словами, он требуется для того чтобы веб-сайты максимально корректно отображались на смартфонах, планшетах и иных девайсах, отличающихся значительной плотностью пикселей. Такой метатег предназначается, в первую очередь, для адаптивных веб-ресурсов, однако он также позволяет улучшить демонстрацию тех страниц, которые обладают фиксированной либо же гибкой разметкой.

Чтобы включить meta viewport для адаптивных веб-ресурсов, нужно добавить лишь одну строку в раздел head.