Retina - корреляция между соотношением пикселей устройства и размером изображения?
Я не совсем понимаю, что window.devicePixelRatio значение, и как оно определяет, какой размер изображения (2x, 3x и т. д.) мне нужно для этого устройства.
Например, на iMac 5K Retina (конец 2015 года) я бы ожидал, что соотношение пикселей будет не менее 3 или около того, но на самом деле это 2, то же самое, что iPad Air и iPhone 6s. Означает ли это, что он предпочитает 2x растровое изображение? 3x?
2 ответа
devicePixelRatio это соотношение между физическими пикселями и независимыми от устройства пикселями (провалами) на данном устройстве. Вы можете думать о провалах как о том, как дисплей "действует".
Например: 27-дюймовый iMac без сетчатки имеет ширину 2560 физических пикселей. Все отображается 1:1, поэтому его ширина составляет 2560 точек, поэтому devicePixelRatio является 1,
На вашей сетчатке 27" iMac ширина составляет 5120 физических пикселей. Но дисплей" работает "так, как будто он имеет ширину всего 2560 пикселей, так что все отображается в том же физическом размере, что и iMac без сетчатки. Следовательно, он по-прежнему составляет 2560 провалов широкий, поэтому devicePixelRatio является 2 (5120 / 2560), и вы бы служили 2x изображений.
(Вы можете посмотреть значения провалов для вашей системы - если у вас есть дисплей сетчатки - перейдите в "Системные настройки"> "Дисплеи"> "Дисплей" и переключите переключатель "Разрешение" на "Масштабированный", а затем наведите указатель мыши на различные параметры. 5K iMac, он скажет: "Похоже, 2560 x 1440").
На сегодняшний день стандартная практика для графики, предназначенной для дисплеев Retina, по-прежнему заключается в предоставлении изображения, которое в два раза больше обычного размера, отличного от Retina.
Напоминание: это хорошая "гигиена полосы пропускания", при которой изображение должно быть настолько большим, насколько это необходимо для размера и разрешения устройства текущего пользователя. Решение этого вопроса выходит за рамки этого вопроса.