Was ist Dots-per-CSS-Inch und Dots-per-Physical-Inch

Lesezeit: 2 Minuten

Ich habe diese Nachricht vom Tab der Chrome Developer Tools-Konsole beim Zugriff erhalten jsfiddle.net:

Erwägen Sie die Verwendung von „dppx“-Einheiten anstelle von „dpi“, da „dpi“ in CSS Punkte pro CSS-Zoll bedeutet, nicht Punkte pro physischem Zoll, also nicht den tatsächlichen „dpi“ eines Bildschirms entspricht. In Medienabfrageausdruck: nur Bildschirm und (-webkit-min-device-pixel-ratio: 2), nicht alle, nicht alle, nur Bildschirm und (Mindestauflösung: 192dpi), nur Bildschirm und (Mindestauflösung: 2dppx)

Es ist in blauer Farbe, also gehe ich davon aus, dass es sich nicht um eine Warnung oder einen Fehler handelt. Warum bin ich auf diese Nachricht gestoßen? Wie kann ich es loswerden oder es ist nur ein Problem mit jsfiddle selbst?

  • Es ist eigentlich eine Chrome-Debug-Nachricht, und Sie können nicht viel dagegen tun, da sie auf dem Code basiert, der auf jsFiddle ausgeführt wird. Sie können die Debug-Meldungen herausfiltern, damit Sie sie nicht sehen, aber das war es auch schon.

    – j08691

    23. Februar 2014 um 17:04 Uhr


  • Es sollte eine Möglichkeit geben, diese lästige Meldung zu deaktivieren.

    – Adam K. Dean

    22. Januar 2015 um 10:49 Uhr

Benutzer-Avatar
Matthias

Dies hängt mit Apples Retina-Displays zusammen, ist aber möglicherweise nicht darauf beschränkt. Diese Displays haben eine höhere Pixeldichte als früher verwendete Bildschirme, aber der Browser verhält sich immer noch so, als hätte er die gleiche Anzahl von Pixeln.

Das iPhone 3GS hatte zB ein Display mit 320 x 480 Pixel, aber das iPhone 4 wurde mit 640 x 960 Pixel veröffentlicht. Anstatt die Website mit dieser Auflösung anzuzeigen, gab der Browser jedoch vor, eine Auflösung von 320 x 480 Pixel zu haben.

Dies führt weiter zur Erfindung von CSS-Pixeln. Wenn Sie angeben, dass etwas ist width:100px in CSS wird es sein 100 Physikalische Pixel auf einem normalen Display, aber 200 physische Pixel auf einem Retina-Display. Ein iPhone 3GS und ein iPhone 4 haben beide das gleiche dpi (da es auf vorgetäuschten CSS-Pixeln basiert) aber ganz anders dppx (da dies auf den realen physischen Pixeln basiert).

Sie können verwenden dppx um zu erkennen, wenn ein Client einen Bildschirm mit hoher Pixeldichte hat, und ihm ein anderes Design bereitzustellen, selbst wenn der Browser des Clients so tut, als hätte er keine so hohe Pixeldichte.

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

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

Mehr Infos hier zu CSS-Pixeln: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

  • Das ist schrecklich. Geben Sie mir einfach die physische Auflösung des Geräts und ich freue mich, Google und Mozilla.

    – trusktr

    31. Juli 2014 um 19:38 Uhr

1216470cookie-checkWas ist Dots-per-CSS-Inch und Dots-per-Physical-Inch

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy