Проверка разрешения экрана

Разрешение вашего экрана показано в верхней части карточки инструмента выше — например, 1920 × 1080. Это размер вашего экрана в CSS-пикселях, то есть в логической единице, которую браузеры используют для вёрстки. Ниже вы также найдёте оценку физического разрешения, которая учитывает масштабирование дисплея. Если числа различаются, значит, дисплей работает с включённым масштабированием — это нормально и рекомендуется на панелях с высоким разрешением. Чтобы увидеть, как значения обновляются наживо, измените размер окна браузера или перенесите его на другой монитор.

Современные дисплеи с высоким разрешением используют масштабирование, чтобы текст и значки оставались удобного размера. Монитор 4K при масштабировании 150% сообщает 2560 × 1440 CSS-пикселей, хотя панель физически отрисовывает 3840 × 2160. Свойства screen.width и screen.height в браузере всегда используют CSS-пиксели, поэтому сообщаемое разрешение — это масштабированное, логическое разрешение. Умножьте его на плотность пикселей устройства, и вы получите физическое разрешение — именно это и делает за вас оценка на этой странице.

Плотность пикселей устройства — это количество физических пикселей, которыми браузер рисует один CSS-пиксель. DPR, равный 1, означает, что один CSS-пиксель равен одному физическому пикселю. DPR, равный 2 — обычное дело на экранах Retina и современных ноутбуках, — означает, что каждый CSS-пиксель рисуется блоком 2 × 2 физических пикселей, из-за чего изображение становится чётче. DPR меняется и при масштабировании: увеличение до 125% в браузере повышает сообщаемый DPR в 1,25 раза — поэтому оценка физического разрешения помечена как приблизительная.

Разрешение экрана описывает весь дисплей — полный монитор или экран телефона. Viewport — это видимая часть веб-страницы внутри окна браузера: он не включает панели инструментов, панели интерфейса, боковые панели и полосы прокрутки. В развёрнутом окне браузера viewport немного меньше экрана; в небольшом плавающем окне он может быть значительно меньше. Веб-разработчики используют размер viewport (а не разрешение экрана) для создания адаптивных макетов — поэтому оба значения показаны здесь рядом.

Физическое разрешение вычисляется умножением CSS-разрешения на плотность пикселей устройства с округлением до целых пикселей. Два фактора делают его оценкой: масштабирование браузера меняет сообщаемый DPR — при масштабе 110% DPR 2 сообщается как 2,2, — а некоторые браузеры применяют собственное округление размеров экрана. Оценка точна, когда масштаб браузера равен 100%, поэтому для точных показаний рекомендуем проверять значение со сброшенным масштабом (Ctrl/Cmd + 0).

Доступная область — это часть экрана, не занятая постоянными элементами операционной системы: панелью задач Windows, Dock в macOS или фиксированными системными панелями на мобильных устройствах. Экран 1920 × 1080 со стандартной панелью задач Windows сообщает доступную высоту 1040 пикселей или меньше. Приложения — включая развёрнутые окна браузера — размещаются внутри доступной области, поэтому при расчёте того, сколько места реально получает развёрнутое окно, это часто более практичное число.

Откройте эту страницу и посмотрите оценку физического разрешения — при масштабе браузера 100% она совпадает с нативным разрешением панели, потому что масштабирование не может изменить число пикселей, которые отрисовывает аппаратура. Проверить можно и в операционной системе: в Windows откройте Параметры › Система › Дисплей и посмотрите пункт «Разрешение дисплея» (рекомендуемый вариант и есть нативное разрешение); в macOS откройте Системные настройки › Мониторы — вариант «По умолчанию для дисплея» обычно использует нативное разрешение с масштабированием для чёткости.

Да. Инструмент использует только стандартные интерфейсы браузера, поэтому работает в браузерах Android и iOS так же, как на настольных компьютерах. На мобильных устройствах сообщаемое разрешение экрана обычно является логическим (CSS) разрешением устройства — например, 393 × 851 на многих телефонах Android, — а оценка физического разрешения отражает реальную панель. Поверните устройство, и вы увидите, как ориентация, соотношение сторон и оба измерения меняются в реальном времени. Доступная область на мобильных не включает системную строку состояния и панель навигации.

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

Карточка обновляется наживо по замыслу. Изменение размера окна меняет viewport; масштабирование меняет плотность пикселей устройства, а значит и физическую оценку; поворот телефона меняет местами ширину и высоту; перенос окна на второй монитор заново измеряет экран, на который оно попало. Если числа изменились без ваших действий, причина во внешнем событии — например, дисплей ушёл в спящий режим, подключённый к док-станции ноутбук переключил выход, или операционная система автоматически изменила масштабирование для доступности.

Единственного правильного ответа нет, потому что подходящее разрешение зависит от размера панели и расстояния просмотра. Практический ориентир: 1920 × 1080 остаётся самым распространённым разрешением рабочего стола, 2560 × 1440 подходит для мониторов от 27 дюймов, а 3840 × 2160 уместно для дисплеев от 32 дюймов, где более высокая плотность пикселей действительно полезна. На ноутбуке более плотная панель вместе с масштабированием системы обычно даёт более чёткий текст, чем панель с низким разрешением при 100%.

Разрешение считает пиксели, а размер измеряет физическую диагональ панели в дюймах. Это независимые величины: мониторы 24 и 32 дюйма могут оба иметь 1920 × 1080, но меньший будет выглядеть чётче, потому что то же число пикселей упаковано в меньшую площадь. Эта плотность выражается в пикселях на дюйм, и именно она определяет, насколько чётко выглядит текст, — поэтому ноутбучная панель с высоким разрешением часто выглядит лучше, чем более крупный настольный монитор с низким разрешением.