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:
[css]
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
[/css]
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:
[css]
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
h1.logo a {
background-image: url(images/logo2x.png);
-webkit-background-size: 300px 80px;
}
[/css]
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.
Schreibe einen Kommentar