web-dev-qa-db-fra.com

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

J'ai reçu ce message de Chrome onglet de la console des outils de développement lors de l'accès jsfiddle.net :

Envisagez d'utiliser des unités `` dppx '' au lieu de `` dpi '', car en CSS, `` dpi '' signifie points par pouce CSS, et non points par pouce physique, donc ne correspond pas au `` dpi '' réel d'un écran. Dans l'expression de requête multimédia: uniquement écran et (-webkit-min-device-pixel-ratio: 2), pas tout, pas tout, uniquement écran et (résolution min: 192 dpi), uniquement écran et (résolution min: 2dppx)

Il est de couleur bleue, donc je suppose que ce n'est pas un avertissement ou une erreur. Alors pourquoi ai-je rencontré ce message? Comment puis-je m'en débarrasser ou c'est juste un problème avec jsfiddle lui-même?

javascripthtmlcssjsfiddle
43
Felix

Ceci est lié, mais peut-être pas limité, aux écrans Apples Retina. Ces écrans ont une densité de pixels plus élevée que les écrans précédemment utilisés, mais le navigateur agit toujours comme s'il avait le même nombre de pixels.

Par exemple. l'iPhone 3GS avait un écran de 320 x 480 pixels mais l'iPhone 4 est sorti avec 640 x 960 pixels. Cependant, au lieu d'afficher le site Web à cette résolution, le navigateur prétendait avoir une résolution de 320 x 480 pixels.

Cela conduit à l'invention des pixels CSS. Si vous spécifiez que quelque chose est width:100px en CSS ce sera 100 physique pixels sur un affichage normal mais 200 pixels physiques sur un écran rétine. Un iPhone 3GS et un iPhone 4 ont tous deux le même dpi (car il est basé sur de prétendus pixels CSS) mais très différent dppx (car cela est basé sur les vrais pixels physiques).

Vous pouvez utiliser dppx pour détecter quand un client a un écran à haute densité de pixels et lui servir un style différent même si le navigateur du client prétend qu'il n'a pas cette haute densité de pixels.

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

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

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

39
Mathias