Viewport (область просмотра) — это прямоугольник, в котором браузер показывает веб-страницу, а его размер — ширина и высота этой области в CSS-пикселях. Обычно он намного меньше разрешения экрана устройства: у iPhone с экраном 1206 × 2622 пикселя viewport равен 402 × 874 CSS-пикселя, потому что каждый CSS-пиксель рисуется тремя физическими пикселями по каждой оси. Адаптивный CSS, медиазапросы и почти все решения по раскладке опираются на размер viewport, а не на разрешение экрана.
Размер viewport и разрешение экрана
Экран телефона описывают три числа, и их легко перепутать:
| Термин | Пример (iPhone 17) | Что это |
|---|---|---|
| Разрешение экрана | 1206 × 2622 px | Физические пиксели матрицы |
| Device pixel ratio (DPR) | 3 | Сколько физических пикселей приходится на один CSS-пиксель по каждой оси |
| Размер viewport | 402 × 874 CSS px | Разрешение, делённое на DPR; именно это видит CSS |
На десктопе DPR часто равен 1 (монитор 1920 × 1080 при масштабе 100% даёт viewport шириной 1920 px за вычетом полос прокрутки) или 2 на ноутбуках с экранами высокой плотности. Масштаб страницы в браузере тоже меняет DPR: при увеличении до 200% ширина viewport в CSS-пикселях уменьшается вдвое.
Значения для каждой модели собраны в статье таблица разрешений экранов iPhone.
Как узнать размер viewport
В консоли браузера
Откройте DevTools (F12 или Cmd + Option + I), перейдите на вкладку Console и выполните:
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth учитывает вертикальную полосу прокрутки. document.documentElement.clientWidth её не учитывает и ближе к тому, от чего считаются проценты в CSS и ширина 100%.
В режиме устройства DevTools
Панель устройств показывает размер эмулируемого viewport над страницей. В режиме Responsive можно перетащить границу или ввести любой размер. Подробнее в статье эмулятор мобильных устройств в Chrome DevTools.
На телефоне
Откройте любой сайт вида «what is my viewport» или страницу с небольшим скриптом, который выводит innerWidth и devicePixelRatio. Учтите, что результат зависит от ориентации экрана и панелей браузера.
Layout viewport и visual viewport
На самом деле у мобильных браузеров два viewport:
- Layout viewport — область, в которой CSS раскладывает страницу. При правильном мета-теге viewport её ширина равна ширине устройства в CSS-пикселях.
- Visual viewport — часть страницы, видимая на экране прямо сейчас. Она уменьшается, когда пользователь увеличивает страницу жестом или открывается экранная клавиатура.
Элементы с position: fixed позиционируются относительно layout viewport, поэтому фиксированный футер может оказаться спрятан под клавиатурой. В JavaScript visual viewport доступен через window.visualViewport.width и .height, а на его событие resize можно подписаться.
Почему высота viewport на телефоне постоянно меняется
На телефонах адресная строка и панели браузера сворачиваются при прокрутке, и видимая высота меняется. Классическая единица 100vh берёт максимально возможную высоту, поэтому блоки на весь экран раньше обрезались снизу. Теперь в CSS есть единицы для каждого случая:
| Единица | Значение |
|---|---|
svh |
Малая высота viewport: панели браузера полностью показаны |
lvh |
Большая высота viewport: панели полностью скрыты |
dvh |
Динамическая высота viewport: меняется вместе с панелями |
vh |
В современных мобильных браузерах то же, что lvh |
Для первого экрана, который должен целиком помещаться при загрузке страницы, обычно надёжнее всего min-height: 100svh. Для ширины есть парные единицы svw, lvw и dvw.
Типичные размеры viewport
| Тип устройства | Типичная ширина viewport (вертикально) |
|---|---|
| Маленькие телефоны | 320–375 px |
| Современные iPhone | 375–440 px |
| Телефоны на Android | 360–412 px |
| Планшеты | 744–1032 px |
| Ноутбуки | 1280–1536 px |
| Мониторы | 1440–2560 px |
Из-за такого разброса адаптивные раскладки делают резиновыми между брейкпоинтами, а не подгоняют под точные размеры.
Как проверить сайт на разных размерах viewport
Если менять размер окна на десктопе, меняется и ширина viewport, но десктопные браузеры обычно не дают сузить окно меньше примерно 500 px, а DPR остаётся 1 или 2. Чтобы увидеть viewport телефона с правильным размером и плотностью пикселей, используйте режим устройства в DevTools или расширение для просмотра мобильной версии, например Mobile View Extension. Оно применяет размер экрана, DPR и user agent выбранного устройства и позволяет задать своё разрешение. Полный порядок проверки описан в статье как проверить адаптивность сайта.
Частые вопросы
Как узнать размер своего viewport?
Выполните window.innerWidth и window.innerHeight в консоли браузера. На телефоне откройте страницу, которая показывает эти значения; результат меняется при повороте экрана.
Размер viewport и разрешение экрана — одно и то же?
Нет. Размер viewport измеряется в CSS-пикселях, разрешение экрана — в физических. Чтобы получить размер viewport, разделите разрешение на device pixel ratio.
Под какой размер viewport делать дизайн?
Делайте резиновую раскладку, которая работает от 320 px. Проверьте типичные ширины телефонов 360, 390–402 и 430–440 px, планшет около 768–834 px и десктоп около 1280–1440 px.