Как рассчитать значение px для медиа-запроса специального телефона?

Question

Как рассчитывается значение px для медиа-запроса?

Например: медиа-запрос iPhone 7, 8 и X = 375px

iPhone X имеет следующие спецификации:

• 1,125 x 2,436 пикселей -5,8 дюйма -463 точек на дюйм

Так почему же медиа-запрос на 375 пикселей.Как рассчитать?

Я спрашиваю, потому что есть некоторые телефоны Android с сумасшедшими характеристиками, и наш "нормальный" запрос не работает.

Answer 1

Существует параметр, обычно называемый плотность пикселей или коэффициент пикселей устройства (DPR) . Браузер на телефоне, столе или рабочем столе масштабирует значение px до фактического количества пикселей на экране. Например, iPhone 6/7/8 имеет плотность пикселей 3 *. 1005 *

Итак, если вы возьмете 1125/3 = 375.

Если вы посмотрите документацию CSS о единицах , вы увидите, что единица px на самом деле является относительной единицей к области просмотра, что может вызвать путаницу, но было необходимо в мире с высоким DPI скрины без переписывания каждого сайта.