Как пользоваться: Разрешение экрана
- Откройте страницу — значения появятся сразу.
- Измените размер окна или поверните телефон, чтобы увидеть изменение viewport.
- Скопируйте данные, чтобы передать их в отчёте об ошибке.
Разрешение экрана и viewport
- Разрешение экрана — это размер всего дисплея в CSS-пикселях (
screen.width × screen.height). - Viewport — это область окна браузера, доступная странице (
innerWidth × innerHeight); именно её используют медиазапросы CSS. - Коэффициент плотности пикселей (DPR) — это количество физических пикселей на один CSS-пиксель. Телефон с DPR 3 и шириной viewport 390 пикселей на самом деле имеет 1170 физических пикселей по ширине.
Распространённые размеры экранов
| Тип устройства | Viewport в CSS | DPR |
|---|---|---|
| Современный iPhone | 390–430 × 844–932 | 3 |
| Телефон на Android | 360–412 × 780–915 | 2.6–3.5 |
| iPad | 768–1032 × 1024–1376 | 2 |
| Ноутбук | 1280–1536 × 720–960 | 1–2 |
| Монитор Full HD | 1920 × 1080 | 1 |
| Монитор 4K (с масштабированием) | 1920–2560 × 1080–1440 | 1.5–2 |
Почему числа выглядят «неправильными»
Операционные системы масштабируют изображение: экран 4K при масштабе 150 % сообщает 2560 × 1440 CSS-пикселей с DPR 1.5. Масштаб браузера тоже меняет DPR: при увеличении до 200 % viewport уменьшается вдвое. Это ожидаемое поведение, а не ошибка.
Для разработчиков
Проектируйте с учётом CSS-пикселей и проверяйте типичные ширины viewport (360, 390, 768, 1024, 1280, 1536). Отдавайте чёткие изображения экранам с высоким DPR через srcset и меняйте их размер с помощью редактора изображений. Плавную типографику с калькулятором clamp() можно сделать без брейкпоинтов для размеров шрифта.
Также ищут как: размер viewport, device pixel ratio.
Инструменты, которые хорошо сочетаются с Разрешение экрана
- Мой IP-адрес — Ваш публичный IP-адрес и всё, что ваш браузер раскрывает сайтам: user agent, экран, язык, часовой пояс и заголовки запроса.
- Парсер User Agent — Расшифруйте любую строку User-Agent: узнайте браузер, движок, операционную систему и устройство, а также определите, принадлежит ли она поисковому роботу, AI-краулеру или скрипту.
- Калькулятор соотношения сторон — Меняйте размер изображений и видео без искажений: укажите соотношение и одну сторону, чтобы получить вторую, или введите размер, чтобы узнать его соотношение.
- PX в REM конвертер — Переводите пиксели, rem и em, задав свой корневой размер шрифта, или вставьте целую таблицу стилей и преобразуйте все значения px за один раз.
Часто задаваемые вопросы
Почему мой монитор 4K показывает меньшее разрешение?
Из-за масштабирования: Windows и macOS увеличивают всё изображение, поэтому браузер сообщает масштабированный размер в CSS-пикселях. Умножьте его на коэффициент плотности пикселей, чтобы получить физическое разрешение.
В чём разница между размером экрана и viewport?
Viewport не включает панели инструментов браузера, вкладки и рамки окна — это пространство, которое реально получает веб-страница.
Эти данные куда-нибудь отправляются?
Нет. Их считывает ваш браузер и показывает только на этой странице.
Можно ли установить Разрешение экрана как веб-приложение и пользоваться им офлайн?
Да. Разрешение экрана — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.