Viewport – необходимый тег для правильного отображения страницы HTML

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

Viewport HTML – как появилась новая задача для адаптивного экрана

Очевидно, небольшие смартфоны отличаются наименьше диагональю, а крупные мониторы наибольшей. Однако сегодняшней эпохе предшествовало время менее развитой техники, потому разнообразие гаджетов было меньше. Параметры экранов отличались не существенно и не было необходимости вводить новый параметр в шапку страницы. Уровень техники позволял использовать и гибкую, и фиксированную разметку. В самом деле, какая разница, если все равно сайты просматриваются примерно в одинаковых условиях.

Но новизну в этот вопрос привнесло создание мобильного устройства. Гаджет уже сейчас имеет большой диапазон параметров, включая пиксельное разрешение. Таким образом, область видимости экрана приобрела большую вариативность, что поставило перед разработчиками задачу по адаптации страницы сайта под устройство. Viewport HTML был создан позже. Изначально вопрос решался через внесение изменений в файл оформления сайта.

CSS3 – сегодня эту спецификацию поддерживают почти все устройства. Но и она имеет недостатки. Из-за множества разрешений экрана адаптивность приходится создавать для каждого параметра отдельно. Два смартфона могут иметь идентичную диагональ, но число точек на единицу площади может отличаться в два раза. Именно такое различие можно наблюдать между продуктами компании Apple.

Модели смартфонов одного и того же производителя отличаются по числу точек на экране в два раза. Неточное определение размеров шрифта и контура блоков приводила к появлению неудобной горизонтальной прокрутки. Это вызывало большой дискомфорт для пользователей интернета.

Meta Viewport – это инструмент, который учел недостатки файла оформления CSS3. Вертикальная прокрутка считается естественной для любой страницы. Неудобства вызывает именно горизонтальная прокрутка. Текст неудобно читать, если его приходится постоянно перемещать в стороны. Этот дефект возникает именно из-за неточности определения ширины страницы. А пользователь может установить экран и по горизонтали.

Параметр добавляется в шапке страницы HTML. В примере указаны два параметра – имя тега и ширина. Viewport Meta Tag - данная строчка позволяет установить точную ширину экрана. Благодаря этому блок с текстом полностью охватывает ширину экрана.

Viewport device-width Как адаптировать сайт под экран смартфона с учетом шрифта

Ниже описан простой пример строчки, которая спасет ситуацию. Параметры тега имеют намного больше вариантов, но простое написание выглядит именно так.

Viewport width параметр указывает браузеру, как именно обрабатывать страницу. В указанных примерах мы могли заметить разницу в определении ширины экрана.

Первый пример задает фиксированную ширину экрана монитора. Это может быть целое положительное число от 200 до 1000 точек. Второй пример адаптирует содержание страницы под разные экраны.

Viewport height Первая строка указывает высоту экрана, целое число от 233 до 1000 пикселей.

Параметры изменения масштаба страницы

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

• initial-scale – исконный масштаб отображается числом от 0.1 до 1.0. Второй случай запрещает масштабировать содержание страницы. С учетом особенностей операционных систем рекомендуется применять 1.0
• user-scalable – пользователь сможет изменять масштаб страницы. Значение может быть равно 1 или 0. Рекомендуется использовать 1, это же число указано по умолчанию. Такое положение позволяет пользователю вносить изменение в масштаб страницы
• minimum-scale – область просмотра наименьшего размера, отображаемая диапазоном чисел от 0.1 до 1.0. Некоторые браузеры устанавливают масштаб по умолчанию, потому рекомендуется назначать 1.0, чтоб избежать нежелательных сюрпризов
• maximum-scale – область просмотра максимального размера обозначается диапазоном от 0.1 до 1.0. Разработчикам рекомендуется назначать 1.0 чтоб запретить масштабирование, и оставить соотношение 1:1

Где должен располагаться тег Viewport на странице HTML

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

• Symbian
• Opera Mobile Mini
• Openwave

Для таких случаев используют старые теги. Популярные конструкторы сайтов, такие как WordPress, не назначают параметры адаптации автоматически. Для решения вопроса необходимо сказать специальный плагин. Но это не означает, что Viewport meta tag можно не прописать в коде. Поисковая система в этом случае учтет это ка ошибку. Потому указание на масштаб обязательно должно быть прописано на странице HTML.