PrepBro
← Назад к вопросам

Что такое viewport?

1.3 Junior🔥 291 комментариев
#HTML и CSS#Браузер и сетевые технологии

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое viewport

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

Что входит в viewport

  • Экран смартфона: 320px - 480px по ширине
  • Планшет: 768px - 1024px
  • Ноутбук: 1920px и более
  • Исключает: адресная строка, панель инструментов, полосы прокрутки

Viewport meta-тег

Для правильной работы адаптивного дизайна нужно указать viewport в HTML:

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

Параметры:

  • width=device-width - ширина viewport равна ширине устройства
  • initial-scale=1.0 - начальный масштаб (без зума)
  • maximum-scale=5.0 - макс зум (опционально)
  • user-scalable=no - запретить зум (не рекомендуется)

Почему viewport важен

Без viewport тега браузер на мобильном:

<!-- БЕЗ viewport -->
<!DOCTYPE html>
<html>
<head>
  <!-- НЕПРАВИЛЬНО! Нет viewport тега -->
</head>
<body>
  <div style="width: 1000px">Контент</div>
</body>
</html>

Браузер попытается показать 1000px контент на 320px экране, пользователь получит горизонтальную прокрутку.

С viewport тегом:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!-- Контент адаптируется к 320px -->
</body>
</html>

Браузер знает, что нужно масштабировать контент под размер экрана.

JavaScript и viewport

Получить размер viewport:

// Размер видимой области
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

console.log(`Viewport: ${viewportWidth}x${viewportHeight}`);
//결과: Viewport: 1920x1080

Не путай с document.documentElement:

// window.innerWidth = видимая область (viewport)
const viewportWidth = window.innerWidth; // 1920

// document.documentElement.clientWidth = viewport без scrollbar
const viewportWidthNoScroll = document.documentElement.clientWidth; // 1920

// document.body.clientWidth = ширина body (может быть меньше)
const bodyWidth = document.body.clientWidth; // зависит от контента

Слушать изменение viewport:

window.addEventListener('resize', () => {
  console.log(`Новый viewport: ${window.innerWidth}x${window.innerHeight}`);
});

// Или использовать hook в React
import { useEffect, useState } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener('resize', handleResize);
    handleResize(); // Вызвать сразу

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

Viewport в CSS

Media queries используют viewport:

/* Мобильные (viewport < 768px) */
@media (max-width: 767px) {
  .container {
    padding: 10px;
  }
}

/* Планшеты (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding: 20px;
  }
}

/* Десктопы (> 1024px) */
@media (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

Viewport units - единицы относительно viewport:

/* 100vw = 100% ширины viewport */
.fullscreen {
  width: 100vw;
  height: 100vh;
}

/* 50vmin = 50% от меньшего размера (width или height) */
.responsive-box {
  width: 50vmin;
  height: 50vmin;
}

/* 100vmax = 100% от большего размера */
.large-element {
  font-size: 5vmax; /* На мобильном 5% от ширины, на ПК 5% от высоты */
}

Практические примеры

1. Адаптивная сетка

/* Меняется в зависимости от viewport */
.grid {
  display: grid;
  gap: 20px;
}

/* Мобильный - 1 колонка */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Планшет - 2 колонки */
@media (min-width: 601px) and (max-width: 1000px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Десктоп - 3 колонки */
@media (min-width: 1001px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

2. Фиксированная шапка с учётом viewport

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* На весь viewport */
  height: 60px;
  background: white;
  z-index: 100;
}

body {
  padding-top: 60px; /* Место для шапки */
}

3. Модальное окно по центру viewport

.modal {
  position: fixed;
  top: 50%; /* Центр viewport по вертикали */
  left: 50%; /* Центр viewport по горизонтали */
  transform: translate(-50%, -50%);
  width: 90vw; /* 90% от ширины viewport */
  max-width: 500px;
  max-height: 90vh; /* 90% от высоты viewport */
  overflow-y: auto;
}

Частые ошибки

Ошибка 1: Забыли viewport meta-тег

<!-- НЕПРАВИЛЬНО! Сайт не будет адаптивным -->
<head>
  <!-- Нет viewport тега -->
</head>

Ошибка 2: 100vw вместо 100%

/* НЕПРАВИЛЬНО: 100vw > viewport если есть scrollbar */
body {
  width: 100vw; /* Создаёт горизонтальный scrollbar */
}

/* ПРАВИЛЬНО: */
body {
  width: 100%; /* Адаптируется под viewport */
}

Ошибка 3: Забыли про mobile-first

/* НЕПРАВИЛЬНО: начинаешь с десктопа */
.container {
  padding: 40px; /* Десктоп */
}

@media (max-width: 768px) {
  .container {
    padding: 10px; /* Мобильный */
  }
}

/* ПРАВИЛЬНО: mobile-first */
.container {
  padding: 10px; /* Мобильный - база */
}

@media (min-width: 769px) {
  .container {
    padding: 40px; /* Увеличиваем для больших экранов */
  }
}

Итог

  • Viewport - видимая область браузера на устройстве
  • Обязателен <meta name="viewport" content="width=device-width, initial-scale=1.0"> для адаптивных сайтов
  • Используй window.innerWidth/innerHeight для получения размеров
  • Используй media queries для адаптации к разным viewport'ам
  • Mobile-first подход: начинай с мобильного, расширяй для больших экранов
Что такое viewport? | PrepBro