Um das Retina Display des iPhones zu erkennen und bessere Grafiken auszuliefern gibt es die bekannte Möglichkeit mit Mediaqueries und -webkit-min-device-pixel-ratio.

Bei Windows Phone 7  war es bisher nicht nötig darauf zu achten, da es nur eine von Microsoft vorgegebene Screengröße gab. Das ist jedoch spätestens seit dem Nokia Lumia 800 vorbei.

Doch wie kann man die Pixeldichte des Displays bei Windows Phone 7 ermitteln? -webkit-min-device-ratio wird wie schon der Prefix "-webkit" vermuten lässt nicht unterstützt.

Ganz nur mit CSS klappt es leider nicht, man kann allerdings mit Javascript die Eigenschaft screen.deviceXDPI abfragen. Für das  HTC Trophy ist der Wert "96", für das Nokia Lumia 800 bereits "144", nun fügt man einfach dem body ab einem gewissen Wert eine Klasse (z.B. "highres") hinzu und violá schon kann man bei besseren Displays bessere Grafiken ausliefern.

Eine kleine Sache über den ich gestolpert bin:

Bei Windows Phone 7 ist es zwingend erforderlich, dass man background-size NACH der Definition von background positioniert. Während iOS und Android die Reihenfolge völlig egal ist wird es bei Windows Phone 7 (Mango) sonst schlichtweg ignoriert.