Как научить браузер понимать единицу измерения «dp» ??
Для браузера 1px = 1dp, если в <head> страницы прописан <meta name="viewport" content="width=device-width, initial-scale=1.0">
Т.е. браузер использует css-пиксели — это те же «dp», — которые на экранах преобразуются в device pixels: 1 css пиксель может равняться 2 пикселям экрана, когда сайт отображается на экране с двойной плотностью (множитель @2x) и т.д.
Ума не приложу, какую проблему вы пытаетесь решить. Но мне кажется, что вы наоборот создаете проблему. Не вижу смысла привязываться к ppi устройства, если только вы не делаете «экранную линейку».
«Dp» и формула пересчета предназначена скорее для дизайнеров, которые рисуют растровые картинки для сайтов и приложений. Но если вы верстаете с использованием svg, то у вас не возникнет никаких проблем. Делайте svg со множителем @1x, и в браузере всё правильно отмасштабируется.
а пробовали использовать еденицы vh и vw?