[HTML / CSS] Auflösungsabhängige Grafiken (IPhone)

Hallo zusammen

Ich arbeite momentan an einer webapp und habe folgende Problemstellung:
Ich möchte auf "hochauflösenden" Bildschirmen andere Grafiken/CSS verwenden als für kleine.

Nun habe ich heute festgestellt, dass das iphone4 (s) zwar 640 Pixel in der Breite hat aber nur als 320px behandelt. D.h. eine 320px Grafik nimmt die komplette Breite ein. Ich will aber wirklich die reellen Pixel ansprechen und nicht kleinere Bilder verwenden, die dann unnötig hochskaliert werden.

Konkret:
Ich habe vier 160px Grafiken nebeneinander (4x160px=640px). Dies sollen die Grafiken für alle geräte sein, die 640px und mehr in der Breite haben (also auch iPhone 4). Für alle die weniger haben, sollen halb so große Grafiken verwendet werden.

Also brauche ich ne CSS weiche oder ähnliches für alles was weniger als 640px Breite hat und zusätzlich den Aspekt, dass die größeren Grafiken auf iphone4 auch wirklich die realen Pixel verwenden.

Wär froh über Vorschläge, die beides einfach realisieren.

Würde sagen das geht nur über ein CMS oder über JS. Wenn du willst kann ich dir ein JS geben das auf jquery basiert und den client auslesen kann.

Es gibt so weit ich weiß mit JS die Möglichkeit die Bildschirmauflösungen zu bekommen ( bzw die Browserauflösung ). Daraus könnte man mit AJAX also Rückgabe an den Webserver die Grafiken entweder neu skalieren lassen. Also mit PHP wäre das kein Thema. Für Fälle mit deaktiviertem JS einfach eine Defaultseite. Ebenso könnte über JS einfach die CSS Datei und andere für die Größe verantwortliche Sachen Dynamisch geladen werden.

Also ich habe auch vor einiger Zeit mit den Retina-Eigenschaften und Grafiken für Webseiten gespielt. Die Webseiten haben weiterhin nur eine Auflösung von 320x480 (minus Adressbar usw). Da kannst du nichts dran ändern.
Es ist aber sehr interessant und total einfach, wie man da Retina-Grafiken einbaut: Eine Grafik von der Größe 100x100 bindest du in das HTML ein und sagst dem HTML, dass das Bild eine Größe von 50x50 haben soll. Dann ist es wirklich eine hochauflösende Grafik und deutlich von einer wirklichen 50x50 Grafik zu unterscheiden.

Frag mich aber nicht warum dem so ist, ich vermute mal das sind irgendwelche Implementierungen um weiterhin kompatibel mit allen non-Retina Webseiten zu bleiben.

Für deine zweite Anfrage sind Media-Queries da, man kann damit auch irgendwie die dppi als Target nehmen, dann kannst du einfach sagen, dass normale iPhones das Bildx1.png als Bild nehmen, Retina-iPhones aber das Bildx2.png.
Eingebunden beides dann wieder mit Breite und Höhe von Bildx1.png, aber Bildx2.png wird eben besser aufgelöst sein.