Viewport что это

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Почему метатег viewport так важен

С ростом популярности мобильных устройств стало важно, чтобы сайты выглядели хорошо не только на компьютерах, но и на мобильных. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования.

�� Подробнее о теге в справочнике по HTML.

Основные параметры метатега viewport

width определяет ширину области просмотра. Чаще всего используется значение device-width , что означает «использовать ширину экрана текущего устройства».

initial-scale — задает начальный масштаб страницы. Значение 1 означает, что страница будет отображена без масштабирования. Пример: initial-scale=1 .

maximum-scale и minimum-scale — определяют, как сильно пользователь может увеличивать или уменьшать масштаб.

user-scalable — может иметь значения yes или no и определяет, может ли пользователь масштабировать страницу.

Какой viewport использовать

Самый распространенный и рекомендуемый код для метатега viewport выглядит так:

Этот код говорит браузеру использовать ширину устройства и установить начальный масштаб в 1 . Используйте такой вариант и не ошибётесь.

Что ещё нужно знать

Избегайте жесткого задания ширины. Используйте width=device-width , а не конкретные пиксели.

Не запрещайте масштабирование. Даже если вы думаете, что ваш дизайн выглядит отлично, дайте пользователям возможность увеличивать и уменьшать масштаб.

Метатег viewport — это маленький, но мощный инструмент, который делает ваш сайт удобным и читаемым на устройствах с разными размерами экрана. Не забудьте добавить его в код своей страницы.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Viewport

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

Окно просмотра представляет собой многоугольную (обычно прямоугольную) область в компьютерной графике, которая в настоящее время просматривается. В терминах веб-браузера это относится к той части просматриваемого документа, которая в данный момент отображается в её окне (или на экране, если документ просматривается в полноэкранном режиме). Содержимое вне окна просмотра не отображается на экране до тех пор, пока оно не будет просмотрено.

Meta-тег viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.

Пример:

meta name="viewport" content="width=device-width, initial-scale=1" /> 

Атрибуты метатега viewport

Meta-тег viewport может иметь следующие атрибуты, указанные через запятую ( , ):

width – ширина области просмотра.

Значением атрибута является целое неотрицательное число от 200 до 10000 пикселей или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана.

Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

Примечание: для сайтов с адаптивным дизайном рекомендуется использовать: width=device-width .

height – высота области просмотра.

Значением атрибута является целое неотрицательное число от 233 до 10000 пикселей или константа device-height, которая задаёт высоту страницы в соответствии с размером экрана.

Примечание: если указан атрибут width, указывать атрибут height не обязательно.

initial-scale – начальный масштаб страницы.

Значением атрибута является вещественное число от 0.1 до 1.0. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

Примечание: в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: initial-scale=1.0.

user-scalable – доступность масштабирования страницы пользователем.

Значение атрибута является логическое «yes» ( 1 ) – можно масштабировать или «no» ( 0 )– нельзя масштабировать.

Примечание: рекомендуется использовать значение «yes» , а т.к. оно установлено по умолчанию, то user-scalable можно и не указывать.

minimum-scale – минимальный масштаб области просмотра.

Значением атрибута является вещественное число от 0.1 до 1.0. В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

maximum-scale – максимальный масштаб области просмотра.

Значением атрибута является вещественное число от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 1.6. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

Примечание: избегайте атрибутов user-scalable, minimum-scale и maximum-scale, т.к. они отрицательно сказываются на доступности содержания.

Дополнительные и полезные метатеги

Meta-тег HandheldFriendly определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими другими мобильными браузерами.

Пример:

meta name="HandheldFriendly" content="true" /> 

Meta-тег MobileOptimized (http://goo.gl/ZpLjZz) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута width в meta-теге viewport.

Пример:

meta name="MobileOptimized" content="320" /> meta name="MobileOptimized" content="width" /> 

Meta-тег apple-mobile-web-app-capable (http://goo.gl/VGDYQC) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.

Пример:

meta name="apple-mobile-web-app-capable" content="yes" /> 

Рекомендованный набор метатегов

Используемый мной набор meta-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:

meta name="viewport" content="width=device-width,initial-scale=1" /> meta content="true" name="HandheldFriendly" /> meta content="width" name="MobileOptimized" /> meta content="yes" name="apple-mobile-web-app-capable" /> 

Читать больше

General Knowledge

• meta viewport. Как он работает?
• Viewport на Wikipedia
• What is viewport in HTML on Stackoverflow
• Get viewport/window size (width and height) with javascript
• A tale of two viewports (Quirksmode)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Viewport — CSS: Адаптивность сайта

Первое, с чем необходимо познакомиться при создании адаптивной вёрстки, — мета-тег viewport. Созданный в компании Apple, он стал стандартом при создании вёрстки.

До перехода к мета-тегу необходимо разобраться, чем является viewport в браузере. Вьюпорт (viewport) — видимая пользователю область страницы, которая доступна без прокрутки.

На картинке ниже viewport обозначен красной границей.

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

Мета-тег viewport позволяет нам указать, какая область просмотра необходима для страницы. Чаще всего его используют для указания ширины области просмотра, так как вертикальный скролл является естественным при работе с веб-страницами. Ширина устанавливается через атрибут width :

 name="viewport" content="width=700"> 

После установки такого мета-тега, ширина области просмотра нашего сайта станет 700 пикселей.

Чтобы увидеть, как это работает, возьмём эмуляцию экрана iPhone 5. Стандартный браузер Safari по умолчанию имеет viewport равный 980 пикселей. Добавим блок шириной 700 пикселей. Обратите внимание, что сейчас в HTML не указан мета-тег viewport.

Если вся ширина нашего сайта равна 700 пикселей, то такой зазор между блоком и краем экрана нас не будет устраивать. Теперь добавим мета-тег viewport, указав ширину 700 пикселей.

После установки ширины области просмотра в 700 пикселей, наш блок полностью охватывает экран устройства.

Помимо указания ширины в пикселях, есть специальное значение device-width , которое установит ширину области равной разрешению экрана устройства, с которого открыта страница.

Другим примером может служить текст. Возьмём эмуляцию iPhone5, который имеет разрешение 320 пикселей в ширину при стандартном viewport в браузере равным 980 пикселей. Напишем любой текст с размером шрифта 20 пикселей. Это достаточно большое значение, чтобы такой текст было комфортно прочитать с экрана мобильного устройства. Но что же мы получим?

Если вы смогли разобрать текст, то у вас очень хорошее зрение 🙂 Но на самом деле это не тот результат, который мы ожидали. Связано это с тем, что наш viewport сильно больше, чем реальное разрешение.

Скорректируем viewport, использовав значение device-width :

Таким образом мы можем сами управлять шириной области просмотра, не отталкиваясь от стандартных значений мобильных браузеров. Помимо свойства width , у мета-тега viewport существует ещё несколько атрибутов.

Масштабирование

initial-scale — указывает коэффициент масштабирования страницы. В качестве значения используется число от 0.1 до 10

Зачастую используется значение 1.0, чтобы браузер по умолчанию выводил наш макет в оригинальном масштабе, а не пытался его подстроить под область просмотра. Хоть это и кажется хорошей идеей, но любые изменения макета должны контролироваться разработчиком.

minimum-scale и maximum-scale устанавливают минимальный и максимальный коэффициент масштабирования страницы.

user-scalable даёт возможность пользователю масштабировать страницу. В смартфонах чаще всего это делается жестом двумя пальцами. Атрибут имеет всего два возможных значения: yes и no .

Распространённое значение мета-тега viewport

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Метатег viewport: почему он важен и как его правильно использовать

Viewport — это область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства.

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

Чтобы пользоваться сайтами было удобно, нужно правильно масштабировать страницы. Для этого используется метатег viewport. Он не делает верстку адаптивной. Его предназначение — контроль масштаба отображения страницы.

Используем силу скриншотов, чтобы понять значение метатега viewport.

Я создал HTML-документ с двумя предложениями:

         
Этот текст должен быть читаемым на всех устройствах без увеличения страницы жестами. Открыл и прочитал.  

Так он выглядит на десктопе.

Не идеально, но прочитать можно. А теперь воспользуемся инструментами разработчика и посмотрим, как эта же страница выглядит на экране смартфона.

Почему так плохо? Потому что браузер думает, что страница предназначена для десктопа, и старается впихнуть ее в размеры экрана. Вы наверняка еще встречаете сайты, которые приходится масштабировать пальцами. Это позапрошлый век.

Теперь давайте добавим в наш код одну строчку: .

           
Этот текст должен быть читаемым на всех устройствах без увеличения страницы жестами. Открыл и прочитал.  

Обновим страницу и посмотрим, как она теперь выглядит на экране смартфона.

С этим уже можно работать — по крайней мере, текст читается без масштабирования. Конечно, это еще не адаптивная верстка. Но мы сделали первый шаг — сказали браузеру, что страницу нужно оптимизировать под небольшой экран.

Чтобы это не выглядело магией, давайте разбираться, как работает метатег viewport.

Два разрешения экрана: физическое и CSS

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

Метатег viewport решает эту проблему адаптивного дизайна с помощью двух параметров: width и initial-scale.

Параметр width=device-width приравнивает ширину вьюпорта к CSS-ширине устройства. CSS — это не физический размер, а некая величина, предназначенная для того, чтобы адаптивный дизайн отображался на экранах одинаково.

CSS-разрешение зависит от плотности пикселей.

• Если плотность пикселей меньше 200ppi, то коэффициент будет 1. То есть у экрана с физическим разрешением 320×480 пикселей будет CSS-разрешение 320×480 пикселей.
• Плотность пикселей 200-300ppi — коэффициент 1,5.
• Плотность пикселей больше 300ppi — коэффициент рассчитывается по формуле плотность/150, а полученное значение округляется (2, 2.5, 3 и так далее).

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Правильное использование метатега viewport

Для области просмотра можно определить следующие параметры:

• width — ширина области viewport. Принимает значение device-width или фактическое число пикселей в виде целого неотрицательного числа — например, 320px.
• height — высота области viewport. Принимает значение device-height или фактическое число пикселей.
• initial-scale — коэффициент масштабирования начального размера viewport. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
• user-scalable — указывает, может ли пользователь масштабировать страницу жестами. Принимает значение yes или no.
• minimum-scale — минимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.
• maximum-scale — максимальное значение масштабирования. Принимает значения от 0.1 до 10. Значение 1.0 задает отсутствие масштабирования.

Универсальное использование метатега viewport выглядит так:

В этом правиле мы указываем, что ширина видимой области равна ширине устройства, а изначального масштабирования нет. Чаще всего это оптимальный сценарий работы страницы.

Мы также можем поиграть со значениями — например, задать конкретную ширину в пикселях:

Посмотрим, что стало со страницей.

Появился горизонтальный скролл. Это очень неудобно, особенно когда на странице много текста. Все из-за того, что браузер отображает страницу шириной 980px.

Добавление ширины страницы в пикселях может быть полезным, если у шаблона неадаптивный дизайн. Например, если ширина макета 1024 пикселя, нужно указать ее в атрибуте width. Тогда браузеры не будут обрезать стороны. Главное, не запрещать пользователям масштабирование, чтобы они могли приблизить страницу, и не добавлять атрибут initial-scale:

Можно поиграть со значением изначального масштабирования. Например, сделать его не 1.0, а 5.0. Тогда страница при открытии в браузере будет увеличена в 5 раз. Можно также указать минимальное и максимальное значения масштабирования, которое доступно пол ьзователям.

Очень аккуратным нужно быть с атрибутом user-scalable. По умолчанию его значение yes — то есть пользователи могут увеличить страницу жестами. Спецификация HTML настоятельно не рекомендует запрещать масштабирование страницы.

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

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

Ошибка: значение метатега viewport не задано

Сообщение о том, что значение метатега viewport не задано, обычно говорит о том, что инструменту проверки не удалось найти в HTML-коде нужное правило.

Чтобы исправить эту ошибку, убедитесь, что метатег viewport размещен внутри блока . Рекомендуется использовать для проверки не оригинальный код страницы, а панель разработчика в браузере. В оригинальном коде может быть ошибка, которая сдвигает правило в блок . Через панель разработчика в браузере вы это сразу увидите.

Если метатег стоит в правильном месте, с подходящими атрибутами и значениями, то, возможно, ошибся инструмент проверки. Такое бывает: вебмастера жалуются, что Яндекс и Google периодически сообщают им о такой проблеме, хотя на самом деле ее нет.