Узнать разрешение экрана

Почему разрешений два

У экрана есть настоящее разрешение, то есть число точек матрицы, и размер в CSS-пикселях, которым пользуются сайты. На обычном мониторе они совпадают. На экранах Retina и при масштабе 125 или 150 % в Windows система рисует каждый CSS-пиксель несколькими точками, и сайты видят меньшее число: у экрана 2880 × 1800 это 1440 × 900.

Крупным числом на странице стоит настоящее разрешение. Его сверяют с характеристиками монитора и выбирают по нему обои и настройки игр. Размер в CSS-пикселях нужен при вёрстке сайтов.

Окно браузера и доступная область

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

Плотность пикселей

Разрешение само не говорит, насколько чёткий экран. Укажите диагональ, и страница посчитает PPI по настоящему разрешению. Для печати и чужих экранов есть отдельный PPI / DPI калькулятор.