Mit Mediaqueries auf verschiedene Pixeldichten reagieren

Um Websites für Endgeräte mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution–Mediaquery sehr gut:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {}

Während -webkit-min-device-pixel-ratio das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht allzu fernen Zukunft soll sogar nur noch die device pixel ratio mit der Maßeinheit dots per pixel relevant sein- dann wird der Mediaquery so aussehen:

@media only screen and (min-resolution: 2dppx) {}

(Lies: Wenn 2 oder mehr Gerätepixel auf ein geräteunabhängiges Pixel kommen, dann…)

Links

Resolution in Media Queries
Media Queries

Übersicht über verschiedene Fachbegriffe aus dem Bereich Retina-Display-Optimierung

Hier eine kurze Übersicht über die verschiedenen Fachbegriffe, ihre deutsche Übersetzung (so vorhanden) sowie eine kurze Erklärung.

Englisch Deutsch Erklärung
device pixels/ physcial pixels/ hardware pixels Gerätepixel/ physikalische Pixel Kleinste Darstellungseinheit auf dem Screen des Endgerätes und somit die Art von Pixel, die gemeint ist wenn es um die Auflösung (also z.B. 640 x 1136px beim iPhone 5) geht.
device independend pixels (dips)/ CSS pixels/ virtual pixels/ logical pixels geräteunabhängiges Pixel/ Referenzpixel/ CSS-Pixel/ virtuelle Pixel Abstrakte optische Referenzeinheit, die zum Angeben von Maßen im CSS (width, height…) benutzt wird.
device pixel ratio (mir ist keine deutsche Übersetzung bekannt) Gibt das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln wieder. Beim iPhone 5 beträgt sie beispielsweise 2 (640 Gerätepixel / 320 dips).
pixel density Pixeldichte/ Punktdichte Errechnet sich aus Wurzel(Breite² + Höhe²) / Bildschirmdiagonale in Zoll; Beispiel am iPad mini Wurzel(1024² + 768²) / 7.9″ = 162.025316456 dpi (dpi-Rechner).

Links

Pixel density
A Pixel Identity Crisis
A pixel is not a pixel is not a pixel
devicePixelRatio
More about devicePixelRatio