Что такое devicePixelRatio — DPR экрана
Что такое devicePixelRatio (DPR): отношение физических пикселей к CSS-пикселям на Retina и HiDPI экранах.
devicePixelRatio (DPR) — это отношение физических пикселей дисплея к CSS-пикселям, которыми оперирует вёрстка. На экранах с высокой плотностью (Retina, 4K) DPR равен 2 или 3: один CSS-пиксель покрывается несколькими физическими.
DPR напрямую влияет на чёткость изображений, canvas и шрифтов. Картинка в 100 CSS-пикселей на Retina требует исходник в 200–300 px, иначе она будет размытой. Разработчики учитывают это при отрисовке графики и выборе ресурсов.
В ToolsHelper проверка экрана показывает DPR, размеры в CSS и физических пикселях. Это помогает понять, почему картинки или canvas выглядят по-разному на разных устройствах.
Device pixel ratio — число физических пикселей на один CSS-пиксель. Отношение 2 значит, что блок в 100 CSS-пикселей занимает около 200 аппаратных пикселей в ширину. Скриншот этого блока шире CSS-ширины. Это не ppi монитора: для ppi нужен физический размер в дюймах. Здесь определение отношения. Инструмент экрана читает значение, которое сообщает браузер.
Частые вопросы
Это разрешение?
Связано, но это множитель плотности, не width×height.
Почему DPR влияет на чёткость?
При DPR 2 один CSS-пиксель рисуется четырьмя физическими, поэтому нужен вдвое больший исходник.