Das iPhone 4 hat ein spezielles Retina-Display. Auf diesem hochauflösendem Bildschirm können Bilder besonders scharf dargestellt werden. Um auch alle verwendeten Bilder in einem Webdesign oder WordPress-Theme (z.B. das Logo oder ein Hintergrund-Musterbild) für das Retina-Display des iPhones zu optimieren, kannst du CSS Media Queries in deinem Stylesheet nutzen.
Und so funktioniert’s
Als erstes musst du von allen, in deinem Stylesheet verwendeten Bildern, eine zweite, doppelt so große Version erstellen.
Hast du z.B. ein Logobild (logo.png) mit den Maßen 300 x 80 Pixel für die normale Smartphone-Version deiner Webseite angelegt, musst du eine zweite Version deines Logos in der Größe 600 x 160px erstellen. Dieses Bild kannst du dann z.B. logo2x.png nennen.
Lade alle für das Retina-Display optimierten Bilder zu den anderen Bildnern deines Webdesigns (z.B. in den images-Ordner) hoch.
Jetzt kannst du die extra vorbereiteten, vergrößerten Bilder mit Hilfe von CSS Media Queries unterhalb deiner Standard-Styles aufrufen:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
Um z.B. ein Retina-Display optimiertes Logo logo.png mit den Maßen 600 x 160 Pixel (als h1 mit der Klasse .logo) einzubinden, benötigst du folgende CSS-Werte innerhalb der geschwungenen Klammern der Media Queries:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
h1.logo a {
background-image: url(images/logo2x.png);
-webkit-background-size: 300px 80px;
}
Indem du die Breite und Höhe der CSS-Klasse mit der »-webkit-background-size« in der eigentlich benötigten, originalen Größe angibst, wird das Retina-Display Logo wieder auf 50 Prozent der Größe reduziert. Mit diesem Trick erhältst du auch auf dem iPhone 4 eine gestochen scharfe Ansicht aller Bilder deines Webdesigns.
Ich hoffe dieser Tipp ist hilfreich für dich. Wenn du Fragen, Ergänzungs- oder Optimierungsvorschläge zu diesem Beitrag hast, schreibe mir doch einfach einen Kommentar. Ich freue mich schon auf dein Feedback.
vorher stand da aber weight: 300px und height: 80px; - da wollte ich noch kommentieren, dass dass über background-size zu machen ist, aber jetzt ist es ja richtig…
Ja, hatte den Artikel noch einmal korrigiert, jetzt funktioniert’s und das Elmastudio-Logo ist inzwischen übrigens auch für das Retina-Dislpay optimiert :)
Hey Ellen, schöner Artikel und einfach erklärt. Hast du Erfahrungen mit solch optimierten Bildern für Android-Smartphones mit Displays die eine ähnliche, hohe Pixeldichte besitzen gemacht? Funktioniert das dort genau so oder muss man dabei etwas anderes beachten?
Die Anleitung im Artikel gilt meines Wissens nur für das iPhone 4. Es gibt aber auch Möglichkeiten, über »device-pixel-ratio« weitere Optimierungen auch für Android-Phones vorzunehmen. Ich werde das Thema auf jeden Fall noch weiter ergänzen.
Danke für den Tipp. Ich werde mir mir das Thema zu »device-pixel-ratio« mal genauer ansehen.
DAS ist pervers :D
Danke, jetzt habe ich wieder etwas zu optimieren - wird getestet*
Hallo Ellen,
das ist ein guter Tipp ;) werde ich in den nächsten Tagen mal testen.
Vielen Dank für den kurz aber gut erklärten Artikel! Praktisch, besonders wenn man ein Perfektionist ist :-)… werde das für mein nächstes CSS3 »Responsive« Theme umsetzten :-)
Grüße
Vincent
Nette Sache - werd ich mal testen
Pefektes Timing, genau nach so etwas habe ich eben gerade gesucht :)
Gleich mal testen, ob es den Effekt hat, den ich mir erhofft habe.
Hallo,
klingt ja erst mal super, aber woher weiß ich jetzt ob ich auf einem iPhone 3 mit iOS 3, einem iPhone 3 mit iOS4 oder auf einem iPhone 4??? anhand des UserAgents lässt sich das jedenfalls nicht bestimmen…
@Fischfix das kann der Browser aus dem Device lesen, das wird nicht aus dem UserAgentString gelesen und hat nix mit dem OS zu tun. Das gilt für alle hochauflösenden Displays und könnte auch zum Testen auf @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {} herabgesetzt werden.