Как пользоваться
- Откройте страницу. Значения сразу считываются из браузера.
- Измените размер окна или поверните устройство, чтобы увидеть, как меняются размер и ориентация области просмотра.
- Нажмите «Копировать всё», чтобы вставить данные в отчёт об ошибке или запрос в службу поддержки.
Как это работает
Браузеры сообщают размеры в CSS-пикселях — единицах, которые веб-страницы используют для разметки. На экранах с высокой плотностью один CSS-пиксель отображается несколькими физическими пикселями. Их соотношение показывает коэффициент плотности пикселей устройства (DPR). Например, у телефона с разрешением 390 × 844 и DPR 3 экранная панель имеет около 1170 × 2532 пикселей устройства. На компьютерах масштабирование страницы в браузере и масштаб дисплея в операционной системе влияют и на DPR, и на размер в CSS-пикселях. Поэтому монитор 2560 × 1440 при масштабе 125 % отображается как 2048 × 1152.
Разрешение экрана охватывает весь дисплей. Доступная область не включает постоянные панели операционной системы, например панель задач Windows или строку меню macOS. Область просмотра — часть окна браузера, в которой отображается страница: без панелей инструментов, но с полосой прокрутки. Именно на размер области просмотра реагируют CSS-медиазапросы, например min-width: 768px, поэтому при проверке адаптивной вёрстки нужно ориентироваться на него.
Цветовая схема и настройка уменьшения движения берутся из тех же CSS-медиапараметров, которые сайты используют для адаптации к системным настройкам. Данные о брендах, платформе и мобильном устройстве поступают из User-Agent Client Hints, которые доступны только в браузерах на Chromium. Некоторые браузеры специально округляют или фиксируют эти значения, чтобы затруднить цифровой отпечаток устройства, поэтому они могут не совпадать с характеристиками вашего оборудования.
Примеры
Проверка адаптивной вёрстки
На ноутбуке коллеги ломается вёрстка. Он отправляет данные, из которых видно, что размер области просмотра — 1280 × 649 при DPR 1.5. Задайте такой же размер области просмотра в панели устройств браузера, чтобы воспроизвести проблему.
Выбор размера изображений
Изображение товара отображается шириной 400 CSS-пикселей. Чтобы оно выглядело чётким на телефоне с DPR 3, нужно 1200 пикселей. Это поможет определить размеры для srcset.
Проверка масштаба монитора
Монитор с разрешением 3840 × 2160 отображается как 2560 × 1440 при DPR 1.5: значит, в Windows установлен масштаб дисплея 150 %.
Часто задаваемые вопросы
Почему разрешение экрана отличается от указанного в характеристиках монитора?
Браузеры указывают размеры в CSS-пикселях: физическое разрешение, делённое на коэффициент масштабирования. Умножьте это значение на коэффициент плотности пикселей устройства, чтобы приблизительно узнать аппаратное разрешение. Масштаб страницы в браузере тоже влияет на отображаемое значение.
Чем размер экрана отличается от размера области просмотра?
Размер экрана — это весь дисплей. Область просмотра — только часть окна браузера, в которой отображается страница, поэтому она меньше и меняется при изменении размера окна или открытии инструментов разработчика.
Используется ли эта информация для отслеживания?
Эта страница не использует такие данные для отслеживания: значения показываются только вам, не сохраняются и никуда не отправляются. Сайты могут считывать те же значения, поэтому некоторые браузеры округляют их, чтобы затруднить цифровой отпечаток устройства.
Почему на ноутбуке указана поддержка сенсорного ввода?
Поддержка сенсорного ввода определяется по количеству точек касания, которое сообщает браузер. Ноутбуки с сенсорным экраном сообщают о них, даже если вы обычно пользуетесь мышью. Некоторые драйверы и конфигурации удалённого рабочего стола могут сообщать о поддержке сенсорного ввода и без сенсорного экрана.
Конфиденциальность
Все значения считываются JavaScript в вашем браузере и показываются только вам. Они не сохраняются и не загружаются, а также не включаются в аналитику. Записывается только анонимное событие об открытии и использовании инструмента.