Viewport: что это и как настроить

Что такое Viewport

Viewport — видимая область веб-страницы в окне браузера. На десктопе viewport равен размеру окна браузера. На мобильных устройствах это сложнее: без специального мета-тега браузер отображает страницу как будто экран шириной 980 пикселей, затем масштабирует её до размера экрана — текст становится крошечным.

Мета-тег viewport решает эту проблему, сообщая браузеру как масштабировать страницу для конкретного устройства:

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

Этот тег обязателен для любого современного сайта и является одним из требований Google для мобильной оптимизации.

Зачем нужен Viewport

Mobile-first индексация: с 2020 года Google использует мобильную версию сайта для индексирования и ранжирования. Страница без viewport мета-тега получает пониженные позиции.

Пользовательский опыт: без viewport мобильный пользователь видит уменьшенную десктопную страницу с нечитаемым текстом.

Core Web Vitals: неправильный viewport вызывает проблемы с CLS и другими метриками.

Google Mobile-Friendly: страница без viewport помечается как "не оптимизирована для мобильных".

Параметры viewport

Основной тег

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

width=device-width — установить ширину viewport равной ширине устройства (320px для iPhone SE, 414px для iPhone Plus).

initial-scale=1 — начальный масштаб 1:1 (не масштабировать при загрузке).

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

<!-- Запрет ручного масштабирования (не рекомендуется для accessibility) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<!-- Разрешить масштабирование до 5x -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />

Важно: user-scalable=no нарушает доступность (accessibility). Пользователи с нарушением зрения не смогут масштабировать страницу. Большинство браузеров игнорируют этот параметр по умолчанию.

CSS единицы и viewport

CSS поддерживает viewport-относительные единицы:

/* vw — 1% ширины viewport */
.hero {
  width: 100vw;       /* полная ширина */
  padding: 5vw;       /* отступы относительно ширины */
}

/* vh — 1% высоты viewport */
.fullscreen {
  height: 100vh;      /* полная высота экрана */
  min-height: 100dvh; /* dynamic viewport height (лучше для мобильных) */
}

/* dvw, dvh — dynamic viewport (учитывает адресную строку браузера) */
.mobile-friendly {
  height: 100dvh;
}

/* svw, svh — small viewport (минимальный, без адресной строки) */
/* lvw, lvh — large viewport (максимальный) */

Media queries и viewport

/* Адаптивный дизайн через breakpoints */
/* Mobile first */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    font-size: 18px;
  }
}

Viewport JavaScript API

// Размеры viewport
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

// Responsive breakpoint в JS
const isMobile = window.matchMedia('(max-width: 768px)').matches;

// Visual Viewport API (учитывает клавиатуру на мобильных)
const visualViewportHeight = window.visualViewport?.height || window.innerHeight;

Проверка Viewport на reChecker

Используйте Responsive Tester для проверки отображения сайта на разных размерах экрана. Инструмент покажет:

• Отображение страницы на 6 типах устройств
• Проблемы с горизонтальным скроллом
• Наличие и корректность мета-тега viewport
• Адаптивность дизайна на разных разрешениях

FAQ

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

Почему высота 100vh на мобильных не равна высоте экрана? На мобильных браузерах адресная строка занимает часть пространства. 100vh = полная высота включая скрытую адресную строку. Для реальной видимой высоты используйте 100dvh (dynamic viewport height) или window.visualViewport.height.

Что такое горизонтальный скролл и как его убрать? Если контент шире viewport — появляется горизонтальный скролл. Причины: фиксированная ширина элементов, переполнение flex/grid контейнеров, абсолютное позиционирование за пределами экрана. Фикс: overflow-x: hidden на body или исправление конкретного элемента.