Определитель размера экрана
Определяйте viewport браузера, разрешение экрана, соотношение пикселей и ориентацию в реальном времени. Бесплатно, 100% в браузере.
Справка
Viewport vs разрешение экрана — в чём разница?
Viewport — видимая область веб-страницы внутри окна браузера, измеряемая в CSS-пикселях (window.innerWidth × window.innerHeight). Она изменяется при изменении размера браузера или открытии DevTools. Разрешение экрана — общее количество пикселей физического дисплея (screen.width × screen.height) — это фиксировано аппаратными средствами и настройками дисплея. Для адаптивной веб-разработки именно viewport имеет значение — он определяет, какие CSS медиа-запросы и контрольные точки активны.
Что такое Device Pixel Ratio (DPR)?
Device Pixel Ratio (DPR) показывает, сколько физических (аппаратных) пикселей приходится на один CSS-пиксель. DPR 1 означает соотношение 1:1 (стандартные дисплеи). DPR 2 означает Retina/HiDPI дисплей — каждый CSS-пиксель отображается 4 физическими пикселями (2×2), обеспечивая более чёткий текст и изображения. DPR 3 распространён на смартфонах высокого класса. Это важно для: подачи изображений @2x/@3x на экраны с высоким DPR, понимания почему скриншоты на Retina-дисплеях вдвое больше ожидаемого разрешения и отладки проблем с макетом, возникающих только при определённых значениях DPR.
Сценарии использования определения размера экрана
Тестирование адаптивного дизайна — убедитесь, что CSS контрольные точки срабатывают при правильной ширине viewport без открытия DevTools. Отчёты об ошибках — сообщайте точные размеры viewport, разрешение экрана и DPR при отправке баг-репортов разработчикам. Планирование скриншотов — знайте точные размеры перед созданием скриншотов для документации или листингов в магазинах приложений. Размеры рекламы и баннеров — проверьте, что размеры viewport соответствуют требуемым размерам рекламных слотов.
Конфиденциальность
Данные получаются из браузерных API и не передаются на сервер.