Frontend Academy · Урок

Мета-тег viewport

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

Урок 1 из 413 шагов

«Мета-тег viewport» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужен метатег области просмотра

Без метатега области просмотра мобильные браузеры отображают страницу шириной для настольного компьютера (часто 980 пикселей) и уменьшают масштаб, чтобы она поместилась. Из-за этого текст становится слишком мелким, а макет — непригодным. Метатег сообщает браузеру, что нужно использовать фактическую ширину устройства.

Тег

Добавьте его внутрь <head> каждой страницы. Он необходим для корректной работы любого адаптивного дизайна.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width

width=device-width задаёт ширину области просмотра равной ширине экрана устройства в CSS-пикселях. На iPhone 14 шириной 390 пикселей область просмотра будет равна 390 пикселям, а не 980.

initial-scale=1.0

initial-scale=1.0 задаёт масштаб 1 при первой загрузке страницы. Без него некоторые браузеры всё ещё могут применить коэффициент масштабирования. Вместе с device-width это даёт настоящее соотношение CSS-пикселей и пикселей устройства 1:1.

CSS-пиксели и физические пиксели

Экраны с высоким DPI (Retina) имеют коэффициент соотношения пикселей устройства (DPR) больше 1. На iPhone 14 шириной 390 пикселей приходится 1170 физических пикселей (DPR = 3). CSS-пиксели абстрагируют физические пиксели — ваш CSS работает в CSS-пикселях независимо от DPR.

Не используйте user-scalable=no

Некоторые разработчики добавляют user-scalable=no, чтобы отключить масштабирование жестом. Не делайте этого. Это не позволяет пользователям с нарушениями зрения увеличивать содержимое для чтения и нарушает критерий успешности WCAG 1.4.4.

Единицы области просмотра: vw и vh

1vw = 1% ширины области просмотра. 1vh = 1% высоты области просмотра. 100vw и 100vh заполняют всю область просмотра. Используйте их для крупных начальных секций и полноэкранных макетов.

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — динамическая высота области просмотра

На мобильных устройствах 100vh включает элементы интерфейса браузера (например, адресную строку), из-за чего содержимое может обрезаться. Более новая единица 100dvh (динамическая высота области просмотра) учитывает видимые элементы интерфейса. Используйте её с резервным вариантом.

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

Область просмотра в DevTools

В Chrome DevTools нажмите значок устройства, чтобы перейти в режим устройства и точно увидеть, как ваша страница выглядит при разных размерах области просмотра. Линейка показывает CSS-пиксели.

Варианты атрибута содержимого

Также можно задать initial-scale, minimum-scale и maximum-scale. Используйте разумные значения. Установка minimum-scale=1 без user-scalable=no по-прежнему разрешает масштабирование — это доступный подход.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Область просмотра и медиазапросы

Медиазапросы используют ширину области просмотра (значение в CSS-пикселях, а не физические пиксели). Если область просмотра равна 390 пикселям, условие @media (max-width: 768px) будет выполнено. Метатег области просмотра обеспечивает корректную работу этих контрольных точек на мобильных устройствах.

Быстрая проверка

Каково назначение width=device-width в метатеге области просмотра?

Ответь в интерактивном уроке

Повторение: метатег области просмотра

Всегда включайте в . Никогда не отключайте масштабирование пользователем. Используйте vw и vh для размеров относительно области просмотра. dvh устраняет проблемы с элементами интерфейса мобильного браузера. Этот единственный тег обеспечивает работу всего адаптивного CSS на мобильных устройствах.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Мета-тег viewport» бесплатный?

Да — полный текст урока «Мета-тег viewport» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Мета-тег viewport»?

Добавляйте мета-тег viewport и изучайте, почему он необходим для корректной работы адаптивных компоновок на мобильных устройствах. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Мета-тег viewport»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy