Что такое точки на CSS-дюйм и точки на физический дюйм

Я получил это сообщение с вкладки консоли Chrome Developer Tools при доступе jsfiddle.net:

Рассмотрим использование единиц "dppx" вместо "dpi" , как в CSS "dpi" означает dots-per-CSS-inch, а не точки на физический дюйм, поэтому не соответствует к фактическому "dpi" экрана. В выражении для запросов в средствах массовой информации: только и (-webkit-min-device-pixel-ratio: 2), не все, не все, только экран и (мин-разрешение: 192 точек на дюйм), только экран и (мин-разрешение: 2dppx)

Он синим цветом, поэтому я предполагаю, что это не предупреждение или ошибка. Так почему я столкнулся с этим сообщением? Как я могу избавиться от него или это просто проблема с jsfiddle сама?

Ответ 1

Это относится, но не ограничивается, к дисплеям яблок Retina. Эти дисплеи имеют более высокую плотность пикселей, чем ранее используемые экраны, но браузер все еще действует так, как если бы он имел одинаковое количество пикселей.

например. iPhone 3GS имел дисплей с разрешением 320 x 480 пикселей, но iPhone 4 был выпущен с разрешением 640 x 960 пикселей. Однако вместо того, чтобы показывать веб-сайт с этим разрешением, браузер сделал вид, что имеет разрешение 320 x 480 пикселей.

Это приводит к изобретению CSS-пикселей. Если вы укажете, что что-то есть width:100px в CSS, это будет 100 пиксели физических объектов на обычном дисплее, но 200 физические пиксели на экране сетчатки. IPhone 3GS и iPhone 4 имеют одинаковый dpi (поскольку он основан на притворных CSS-пикселях), но очень разные dppx (так как это основано на реальных физических пикселях).

Вы можете использовать dppx для определения того, когда клиент имеет экран с высокой плотностью пикселей и выполняет его другой стиль, даже если клиентский браузер делает вид, будто он не имеет такой высокой плотности пикселей.

 .comp {
     background-image: url(image.png);
 }

 @media only screen and (min-resolution: 2dppx) {
     .comp {
         background-image: url([email protected]);
     }
 }

Дополнительная информация о CSS-пикселях: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution