javascript - que - ¿Qué es puntos por pulgada CSS y puntos por pulgada física?

pixeles por pulgada

Question

Recibí este mensaje de la pestaña de la consola de Chrome Developer Tools cuando jsfiddle.net a jsfiddle.net :

Considere el uso de unidades ''dppx'' en lugar de ''dpi'', ya que en CSS ''dpi'' significa puntos por CSS, no puntos por pulgada física, por lo que no corresponde al ''dpi'' real de una pantalla. En la expresión de consulta de medios: solo pantalla y (-webkit-min-device-pixel-ratio: 2), no todos, no todos, solo pantalla y (min-resolución: 192 ppp), solo pantalla y (min-resolución: 2dppx)

Está en color azul, así que supongo que no es una advertencia o error. Entonces, ¿por qué encontré este mensaje? ¿Cómo puedo deshacerme de él o simplemente es un problema con jsfiddle ?

Answer 1

Esto está relacionado, pero quizás no de forma limitada, con las pantallas de Retina de manzanas. Estas pantallas tienen una densidad de píxeles mayor que las pantallas utilizadas anteriormente, pero el navegador todavía actúa como si tuviera la misma cantidad de píxeles.

Por ejemplo, el iPhone 3GS tenía una pantalla con 320 x 480 píxeles, pero el iPhone 4 se lanzó con 640 x 960 píxeles. Sin embargo, en lugar de mostrar el sitio web en esa resolución, el navegador pretendía tener una resolución de 320 x 480 píxeles.

Esto lleva a la invención de píxeles CSS. Si especifica que algo es width:100px en CSS será de 100 píxeles físicos en una pantalla normal, pero 200 píxeles físicos en una pantalla retina. Un iPhone 3GS y iPhone 4 tienen los mismos dpi (ya que se basa en píxeles de dppx CSS) pero dppx muy diferente (ya que se basa en los píxeles físicos reales).

Puede usar dppx para detectar cuando un cliente tiene una pantalla de alta densidad de píxeles y darle un estilo diferente, incluso si el navegador del cliente simula que no tiene esa alta densidad de píxeles.

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

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

Más información aquí en CSS-píxeles: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution