Qu'est-ce que les points-par-CSS-pouce et points-par-physiques pouces

Question

J'ai reçu ce message à partir de Chrome Developer Tools onglet de la console lors de l'accès jsfiddle.net:

Envisager l'utilisation de 'dppx unités" au lieu de "dpi", comme dans CSS 'ppp' signifie points-par-CSS-pouce, pas de points-par-physiques pouces, donc ne correspond pas pour le dpi de l'écran. Dans les médias de l'expression de requête: seulement l'écran et (-webkit-min-device-pixel-ratio: 2), pas tous, pas tous, seulement screen and (min-résolution: 192dpi), seul écran et (min-résolution: 2dppx)

Il est de couleur bleue, donc je suis en supposant que ce n'est pas un avertissement ou d'erreur. Pourquoi n'ai-je rencontre ce message? Comment puis-je obtenir débarrasser de lui, ou c'est juste un problème avec jsfiddle lui-même?

Answer 1

Cela est lié, mais peut-être pas seulement, les Pommes, les écrans de la Rétine. Ces écrans ont une haute densité de pixels que précédemment utilisé les écrans, mais le navigateur agit toujours comme si elle a le même nombre de pixels.

E. g. l'iPhone 3GS a un écran de 320 x 480 pixels, mais l'iPhone 4 est sorti avec une résolution de 640 x 960 pixels. Cependant, au lieu de montrer site web à cette résolution, le navigateur fait semblant d'avoir une résolution de 320 x 480 pixels.

Cela a conduit à l'invention de l'CSS-pixels. Si vous spécifiez que quelque chose est - width:100px en CSS, il sera 100 des examens de pixels sur un affichage normal, mais 200 physique des pixels sur un écran retina. Un iPhone 3GS et l'iPhone 4, les deux ont le même dpi (car il est basé sur de faire semblant CSS-pixels), mais très différente dppx (comme cela est basé sur la physique de pixels).

Vous pouvez utiliser dppx de détecter lorsqu'un client a une forte densité de pixels écran et de la servir à un autre style, même si le navigateur du client prétend, comme il n'a pas que la densité élevée de pixel.

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

 @media only screen and (min-resolution: 2dppx) {
     .comp {
         background-image: url(image@2x.png);
     }
 }

Plus d'info ici sur CSS-pixels: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution