Vor einiger Zeit habe ich ja eine Reihe von Test geschrieben die helfen sollen herauszufinden welche Media Queries auf ein bestimmtes Gerät zutreffen und anwendbar sind. Eine Eigenschaft die ich dabei abprüfe ist Resolution. Damit kann man in seinem Layout auf unterschiedliche Auflösungen von Displays reagieren. In der Spezifikation der Media Queries werden zwei Einheiten aufgeführt mit denen die Auflösung eines Displays angegeben werden kann: dpi und dpcm. Beides gibt die Anzahl der Bildpunkte auf einer bestimmten Länge an. Auf einen Zoll bezieht sich dpi und dpcm auf einen Zentimeter. Ein Beispiel gefällig?

@media only screen and (resolution: 96dpi) {
   background-image: url(background_96.png);
}
@media only screen and (resolution: 144dpi) {
   background-image: url(background_144.png);
}

Leider weigert sich Apple, obwohl die ja recht viele ihrer Retina-Displays verkaufen, dieses Feature zu unterstützen. Stattdessen implementieren sie ihre eigene Lösung: -webkit-min-device-pixel-ratio. Als Wert dient hierbei aber nicht ein absoluter Wert sondern das Verhältnis der Auflösung zum angenommenen Standard von 96dpi. Ein Display mit 144dpi hat demzufolge ein Verhältnis von 1.5.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
   background-image: url(background_96.png);
}
@media only screen and (webkit-min-device-pixel-ratio: 1.5) {
   background-image: url(background_144.png);
}

Kürzlich ist mir in der Spezifikation CSS Values and Units Module Level 3 aufgefallen das das W3C noch eine dritte Möglichkeit vorsieht die Auflösung eines Monitors anzugeben. Das W3C nennt diese Einheit dppx, oder länger: Dots per Pixel. Die Logik dahinter basiert auf der Definition eines Pixels beim W3C. Ein Pixel ist nämlich per Definition der 96te Teil eins Zolls. Damit wird durch ddpx genau das gleiche Verhältnis ausgedrückt das Webkit für min-device-pixel-ratio verwendet. Das Beispiel von oben sieht damit wie folgt aus:

@media only screen and (resolution: 1dppx) {
   background-image: url(background_96.png);
}
@media only screen and (resolution: 1.5dppx) {
   background-image: url(background_144.png);
}

Wer nun wissen will ob und wo das auch wirklich funktioniert habe ich meine Testcases entsprechend erweitert. Es ist nun möglich zu allen Abfragen die Auflösung betreffend eine der drei Einheiten auszuwählen.