Luabify Быстрая диагностика устройств

Тест DPI экрана: DPR, область просмотра, разрешение и масштаб

Проверьте соотношение пикселей устройства, оценочный DPI, разрешение экрана и размер области просмотра, чтобы понять масштабирование, масштаб браузера, поведение Retina и почему макеты выглядят по-разному на разных экранах.

Снимок дисплея

DPI экрана и соотношение пикселей

Проверьте разрешение экрана, соотношение пикселей устройства и примерный DPI.

DPI — это оценка на основе соотношения пикселей браузера, а не физическое измерение.

Дисплей

Разрешение экрана--
Пиксели устройства--
Глубина цвета--
Глубина пикселя--

Область просмотра

Размер области просмотра--

Плотность

Соотношение пикселей устройства (DPR)--
Оценочный DPI--

Зачем запускать этот тест DPI экрана онлайн

Этот тест DPI экрана особенно полезен, когда сайт выглядит слишком увеличенным, текст кажется слишком мелким, скриншоты выглядят размытыми или один и тот же макет ведет себя по-разному на разных устройствах. Вместо догадок можно сравнить соотношение пикселей устройства, оценочный DPI, разрешение экрана и размер области просмотра в одном месте. Поэтому страница полезна дизайнерам, frontend-разработчикам, QA-командам, специалистам поддержки и всем, кто пытается объяснить, почему Retina или HiDPI-дисплей рендерит иначе, чем стандартный экран.

Что именно измеряет инструмент

Инструмент читает значения уровня браузера, такие как window.devicePixelRatio, размер экрана, размер области просмотра и глубина цвета. Из этих значений он рассчитывает оценочный DPI с учетом текущего контекста масштабирования браузера. Это помогает понять CSS-пиксели и пиксели устройства, но не является лабораторным измерением физической плотности панели. Считайте это практической диагностикой масштабирования и рендеринга, а не инструментом аппаратной калибровки.

Почему макеты, скриншоты и интерфейс могут выглядеть по-разному

Страница может выглядеть иначе из-за масштабирования операционной системы, масштаба браузера, размера окна и плотности дисплея — все это меняет то, что сообщает браузер. Высокое соотношение пикселей устройства часто делает текст и графику резче, но также меняет поведение скриншотов, рендеринга canvas, графических ресурсов и адаптивных брейкпоинтов. Область просмотра, которая кажется меньше ожидаемого, обычно означает, что окно браузера, уровень масштаба или интерфейс браузера влияет на видимую область, а не само физическое разрешение экрана.

  • Более высокое соотношение пикселей устройства обычно означает более плотный экран и более резкий рендеринг.
  • Оценочный DPI — только приближение на основе значений, видимых браузеру.
  • Размер области просмотра меняется с размером окна, масштабом браузера, ориентацией и интерфейсом браузера.
  • Масштабирование операционной системы может заставить одно и то же оборудование сообщать разное поведение на уровне браузера.
  • Инструмент лучше всего подходит для отладки масштабирования и макета, а не для сертификации точного физического DPI.

Что результат помогает диагностировать

Используйте страницу, чтобы сравнить ноутбук с внешним монитором, проверить, почему сайт выглядит слишком крупным, понять, почему скриншот кажется мягким на одном устройстве и четким на другом, или подтвердить, меняют ли масштаб браузера и DPR ваш адаптивный макет. Она работает локально в браузере и не сохраняет персональные данные.

Похожие инструменты

Частые вопросы

Что показывает этот тест DPI экрана?
Он показывает соотношение пикселей устройства, оценочный DPI, разрешение экрана, размер области просмотра, глубину цвета и связанные значения дисплея на уровне браузера. Вместе эти числа помогают объяснить различия масштабирования, масштаба браузера и рендеринга.

Это измеряет точный аппаратный DPI?
Нет. Значение DPI здесь является оценкой, полученной из данных браузера и текущего контекста масштабирования. Оно полезно для практической диагностики, но не является точным физическим измерением панели.

Что такое соотношение пикселей устройства и почему оно важно?
Соотношение пикселей устройства показывает, сколько физических пикселей устройства соответствует одному CSS-пикселю. Это важно, потому что влияет на отображение текста, изображений, рендеринга canvas, скриншотов и адаптивных макетов на экране.

Почему сайт выглядит увеличенным или слишком крупным на одном экране?
Обычные причины — масштабирование операционной системы, масштаб браузера, другое соотношение пикселей устройства или меньшая эффективная область просмотра. Даже одно и то же разрешение может ощущаться очень иначе, когда браузер сообщает другой контекст масштабирования.

Почему размер области просмотра меньше разрешения экрана?
Область просмотра — это только видимая область браузера, а не весь физический экран. Размер окна, интерфейс браузера, уровень масштаба, боковые панели и мобильный UI уменьшают доступную область просмотра.

Поможет ли это объяснить размытые скриншоты или мягкий UI?
Да. Несоответствие между соотношением пикселей устройства, размером экспорта изображения, масштабом браузера и предположениями об области просмотра — частая причина, почему скриншоты или элементы интерфейса выглядят размытыми на одном дисплее и резкими на другом.

Влияет ли масштаб браузера на результат?
Да. Масштаб браузера может менять эффективную область просмотра и то, как браузер сообщает значения, связанные с масштабированием. Для стабильного сравнения проверяйте все устройства на одинаковом уровне масштаба.

Влияет ли масштабирование операционной системы на результат?
Да. Windows, macOS и некоторые Linux-окружения могут применять масштабирование, которое меняет значения на уровне браузера. Поэтому одинаковое оборудование может вести себя по-разному в веб-макете.

Можно использовать это для адаптивного дизайна или QA-тестирования?
Да. Инструмент полезен для проверки размера области просмотра, DPR и контекста экрана перед исследованием брейкпоинтов, ошибок макета, проблем скриншотов или различий frontend-рендеринга.

Работает ли тест DPI экрана на телефонах и планшетах?
Да. Он работает в современных мобильных браузерах и помогает объяснять поведение Retina, HiDPI и мобильного масштабирования. Результаты могут меняться с ориентацией, масштабом и интерфейсом браузера.

Этот тест DPI экрана приватен?
Да. Он работает локально в вашем браузере и не загружает и не сохраняет персональные данные. Показания обновляются в реальном времени, пока страница открыта.

Чего этот тест DPI экрана не может сделать?
Он не может откалибровать дисплей, измерить точный физический DPI панели, автоматически исправить проблемы масштабирования или проверить точность цвета. Он только сообщает значения, которые браузер может наблюдать.