медиа-запрос "Resolution" для ссылки на фактический экран

Question

Я пытаюсь использовать медиа-запрос «Resolution» для определения фактического DPI экрана.

Код, который я делаю, выглядит следующим образом:

window.matchMedia(`(resolution: ${value}dpi)`).matches

Но яобнаружите, что value, для которого этот запрос является истинным, равно 96 на двух разных устройствах, которые не имеют одинаковый DPI.Например, на одной машине фактическое значение DPI равно 157. window.devicePixelRatio равно 1 на обеих этих машинах.На третьем устройстве фактическое значение DPI равно 215, но приведенный выше запрос говорит мне, что это 192 (ровно удвоенное значение 96), а window.devicePixelRatio равно 2.

Я видел мультимедийные запросы CSS, которые выглядят как "@media "или" @media screen ", но если я помещу любое из этих значений в строку, я передам matchMedia, то оно никогда не произойдет, независимо от значения.Тем не менее, я чувствую, что должен что-то упустить, потому что спецификация говорит, что resolution соответствует реальному разрешению экрана, и я никогда не вижу, чтобы это произошло.

Answer 1

CSS <resolution> единицы основаны на единицах CSS, а не на реальных физических размерах.

Так что, если мы забудем о факте, что DPI - это печатная единица, и поэтому, когда он относится к экрану, он должен называться PPI, <resolution> не покажет его вам.

Вместо этого эта единица измерения действительно равна pixels per CSS inch (где pixel - наименьшая физическая точка вашего дисплея), а CSS inch определяется как 96px (где px - магическая единица CSS, не какая-то физическая вещь).

Итак, у вас есть просто devicePixelRatio * 96, и он не дает вам никакой информации о физической плотности вашего экрана (что потребует от вашего браузера знать фактический физический размер вашего дисплея, что невозможно, для простоты вы можете использовать лучевой проектор в качестве дисплея).