Что такое viewport html
Перейти к содержимому

Что такое viewport html

  • автор:

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 12 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

@viewport¶

Правило @viewport позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Является аналогом , но переносит параметры из HTML в правила CSS.

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12
@viewport  min-width: 640px; max-width: 800px; > @viewport  zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; > @viewport  orientation: landscape; > 

Значения¶

min-width¶

Минимальная ширина области просмотра. Любые единицы CSS для размера.

max-width¶

Максимальная ширина области просмотра. Любые единицы CSS для размера.

width¶

Одновременно устанавливает min-width и max-width . Любые единицы CSS для размера, а также device-width .

min-height¶

Минимальная высота области просмотра. Любые единицы CSS для размера.

max-height¶

Максимальная высота области просмотра. Любые единицы CSS для размера.

height¶

Одновременно устанавливает min-height и max-height . Любые единицы CSS для размера, а также device-height .

zoom¶

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

браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ;

положительное число определяет масштаб, значение 1.0 соответствует 100% ;

масштаб можно задавать в процентах, 100% указывает, что масштабирование не требуется.

min-zoom¶

Устанавливает минимальный масштаб документа. По умолчанию установлено значение auto .

браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ;

положительное число определяет масштаб, значение 1.0 соответствует 100% ;

масштаб можно задавать в процентах, 100% указывает, что масштабирование не требуется.

max-zoom¶

Устанавливает максимальный масштаб документа. По умолчанию установлено значение auto .

браузер автоматически устанавливает масштаб, чтобы целиком отобразить документ;

положительное число определяет масштаб, значение 1.0 соответствует 100% ;

масштаб можно задавать в процентах, 100% указывает, что масштабирование не требуется.

user-zoom¶

Определяет, может пользователь масштабировать документ или нет. По умолчанию установлено значение zoom .

пользователь может масштабировать документ;

пользователю запрещено изменять масштаб.

orientation¶

Управляет ориентацией документа. По умолчанию установлено значение auto .

устанавливает ориентацию автоматически на основе положения устройства;

документ должен быть зафиксирован в портретной ориентации;

документ должен быть зафиксирован в альбомной ориентации.

Спецификация¶

Пример¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
 html> head> meta charset="utf-8" /> title>@viewporttitle> style> @viewport  width: device-width; zoom: 1; max-zoom: 2; > style> head> body> . body> html> 

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

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

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

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

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

У viewport пять основных параметров — width , initial-scale , maximum-scale , minimum-scale , user-scalable .

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

Параметр initial-scale задаёт начальный масштаб страницы. Значение 1 означает, что страница будет отображена без масштабирования. Записывается так: initial-scale=1 . Параметры maximum-scale и minimum-scale определяют, как сильно пользователь может увеличивать или уменьшать масштаб. Параметр user-scalable имеет значения yes или no и определяет, может ли пользователь масштабировать страницу.

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

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

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

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

Для чего используется мета-тег viewport и как его настроить

Что такое viewport и для чего используется meta name viewport: основные атрибуты и характеристики. Как настроить значение мета-тега: пошаговая инструкция с примерами. Что делать, если значение не задано. Как проверить адаптивность страницы.

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

Что такое метатег viewport и зачем он нужен

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

Область просмотра пользователя на десктопе

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

❗️Метатег viewport не адаптирует страницу сам. Он только сообщает, что сайт нужно отобразить по определённым правилам. Чтобы браузер правильно понял команду, у страницы должна существовать мобильная версия дизайна.

Благодаря метатегу viewport пользователь видит экран не так:

Контент адаптирован под размер экрана

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

У метатега есть свои атрибуты — специальные команды, которые сообщают определённые параметры метатега.

Эти команды передаются с помощью атрибута content. Все указанные внизу значения meta viewport будут вписаны в атрибут content через запятую, например, так:

Width

Определяет, какая ширина будет у области просмотра:

  • если значение атрибута device‑width, то ширина страницы подстроится под ширину экрана;
  • если значение в пикселях, например 400, атрибут укажет браузеру всегда отображать страницу шириной 400 пикселей. Атрибут может принимать значение от 200 до 10 000 пикселей;
  • если значение атрибута не указано, будет по умолчанию приниматься такое значение: в Safari с мобильного — 980 px, Opera — 850 px, Android WebKit — 800 px, IE — 974 px.

Если у сайта есть адаптивный дизайн, рекомендуется использовать значение width=device‑width

Height

Определяет, какая высота будет у области просмотра. Указывать его не обязательно, если уже указан атрибут width, так как браузер сохранит соотношение сторон.

Если выставить значение атрибута device‑height, то высота сайта подстраивается под высоту экрана. Но атрибуту можно присвоить и точное значение от 233 до 10 000 пикселей, например 800 пикселей. Тогда высота страницы будет постоянной.

Initial‑scale

Передаёт начальный масштаб страницы. Указывает, во сколько раз область просмотра станет больше или меньше по сравнению с её исходным значением.

Значение атрибута может быть от 0,1 до 10. Если указать 1,0, область просмотра масштабируется под размер экрана 1:1.

User‑scalable

Разрешает или запрещает пользователям приближать и отдалять страницу.

Если user‑scalable имеет значение «yes», масштабировать можно, если «no» — нельзя. По умолчанию значение user‑scalable всегда «yes», поэтому его можно не указывать.

Minimum‑scale и maximum‑scale

С их помощью можно задать минимальный и максимальный масштаб: minimum‑scale и maximum‑scale от 0,1 до 1,0. Значение 1,0 говорит браузеру «не масштабировать».

Минимальный и максимальный масштаб используют, чтобы изменить настройки браузеров. Например, масштаб браузера Safari по умолчанию 0,25. Его можно изменить, если задать minimum‑scale или maximum‑scale.

Как настроить масштаб страницы через метатег viewport

Метатег указывают в HTML‑коде каждой страницы в разделе в таком виде:

Внутри атрибута content описываются все необходимые значения через запятую. Например:

Пример HTML‑кода

Как подобрать масштаб

Экраны гаджетов имеют два типа разрешений:

  • физическое — можно измерить;
  • CSS — величина, которая зависит от плотности пикселей.

Плотность пикселей — это количество пикселей, которое приходится на один дюйм экрана. Измеряется в PPI.

У разных смартфонов может быть одинаковое физическое разрешение, но CSS‑разрешения будут различаться. Тогда одна и та же страница на одном устройстве отображается нормально, а на втором — с маленьким нечитаемым текстом.

Чтобы такого не допустить, используют атрибуты width и initial‑scale:

  • первый атрибут подгонит область просмотра под CSS‑ширину любого девайса. Записывают атрибут со значением device‑width так: width=device‑width;
  • второй атрибут увеличит масштаб в несколько раз через коэффициент, и текст не будет мелким:
    • если у экрана 200 ppi, то коэффициент 1;
    • если у экрана 200‑300 ppi — коэффициент 1,5;
    • если у экрана больше 300 ppi, коэффициент считают так: плотность пикселей делят на 150, а результат округляют.

    Увидеть, как width=device‑width влияет на то, как выглядит страница, можно на примере ниже с iPhone 6. Слева страница подстроилась под размер экрана, но шрифт мелкий. Справа та же страница, но с width=device‑width и с initial‑scale=1. Текст крупнее, читать стало удобнее:

    Влияние атрибутов width=device‑width и initial‑scale на то, как выглядит страница

    Как настроить отображение в зависимости от ориентации экрана

    Если пользователь открывает страницу на смартфоне, он может менять её ориентацию, когда переворачивает смартфон в горизонтальное положение. В этот момент некоторые гаджеты увеличивают масштаб по умолчанию. Чтобы масштаб не «прыгал», используют атрибут initial‑scale и задают ему значение 1.

    Другой способ запретить устройству менять масштаб — использовать атрибут maximum‑scale. Если задать ему значение 1,0, то при переключении ориентации масштаб не будет меняться.

    Как проверить адаптивность страницы

    Через Google

    После настройки meta viewport можно проверить, как отображается страница на мобильных экранах, не появляется ли полоса прокрутки. Это можно сделать через инструмент «Проверка оптимизации для мобильных» от Google.

    Если страница в порядке, появится такой результат:

    Проверка в GSC: Страница оптимизирована под мобильные

    Если нет, сервис перечислит ошибки, которые нужно исправить:

    Проверка в GSC: Страница не оптимизирована под мобильные

    Через Яндекс.Вебмастер

    Заходите в Вебмастер → Инструменты → Проверка мобильных страниц, указываете ссылку на сайт и нажимаете «Проверить». Загружается отчёт.

    Отчет проверки мобильных страниц в Яндекс.Вебмастере

    Если в вёрстке есть ошибки, они попадут в отчёт. Иногда бывает так, что метатег viewport указан, а внизу все равно горизонтальная прокрутка. Значит, какой‑то контент не поместился в область просмотра. Надо проверить вёрстку сайта и то, правильно ли записан метатег.

    Ещё больше про работу с мобильной версией сайта в модуле 3 нашего бесплатного стартового курса по SEO. Курс бесплатный, в конце — сертификат от Топвизора.

    Вкратце

    1. Viewport используют, чтобы область просмотра страницы совпала с размером экрана пользователя. В этом случае страница выглядит нормально на любом экране: не расползается, не сужается, не убегает под скролл.
    2. Метатег прописывают на каждой странице в разделе со специальными значениями атрибутов — командами, которые управляют метатегом. Среди них:
      • width — даёт браузеру указания, как подстроить страницу под разрешение экрана.
      • height — определяет, какая высота будет у области просмотра.
      • initial-scale — указывает, во сколько раз увеличить масштаб по сравнению с начальным вариантом.
      • user-scalable — разрешает или запрещает пользователям приближать или отдалять страницу.
      • minimum-scale и maximum-scale — меняют настройки браузеров.
    3. Проверить работу viewport можно в Google Search Console или в Яндекс.Вебмастере.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *