Ratgeber: "HTML, CSS, Javascript & PHP"

Mobil in HD mit Retina Switch

11.6.2012 von Anna Kobylinska und Filipe Pereira Martins

Wie viele Benutzer des neuen iPads feststellen mussten, schluckt die höhere Auflösung deutlich mehr Bandbreite, wenn das Gerät tatsächlich hochaufgelöste Bilder empfängt. Ein neuer Dienst namens Retina Switch will hier Abhilfe schaffen.

ca. 1:40 Min
Ratgeber
Mobil in HD mit Retina Switch
Mobil in HD mit Retina Switch
© Archiv

Apple debütierte mit dem hochaufgelösten Retinadisplay im iPhone 4. Da die Schärfe des Displays bei den Benutzern extrem gut ankam, hat es Apple nun auch dem neuen iPad verliehen. Zahlreichen Analysten zufolge sollen in Kürze andere Hersteller nachziehen und ihren Geräten ebenfalls ein hochaufgelöstes Display in Retinaqualität spendieren. Nun sind aber heutige Mobilfunknetze kaum dafür vorbereitet, das scharfe Display stets mit hochaufgelösten Daten zu beliefern. Der Dienst Retina Switch bietet Website- Betreibern ein winziges Skript, mit dem sich das Herunterladen von Bildern in Retina-Qualität beim Zugriff auf Websites mit Unterstützung für diese Lösung durch den Besucher selbst deaktivieren lässt.Das benötigte Skript können Sie von der folgenden Adresse kostenlos herunterladen: retinaswitch.com. Damit das Skript Ihr Stylesheet findet, müssen Sie nach dem Auspacken des Download-Archivs noch die zugehörige Variable anpassen:

pathToRetinaStyles="css/retina.css";

Danach gilt es, das Skript in die Websites einzubinden. Hierzu fügen Sie in den betreffenden Dokumenten als letztes Element direkt vor dem schließenden </body>-Tag die Folgende Zeile hinzu:

<script src="js/retina.js"></script>

Nach dem Einbinden in Ihre Website benötigen Sie nur noch ein optimiertes Retina-Stylesheet. Diese Aufgabe erfüllt etwa dieser Code:

@media only screen and (-webkit-min-device-pixel-ratio:
2) {
.test-image { background:url(test@2x.png) no-repeat top
left; -webkit-background-size: 100px 100px; }
.retina { font-size:1px; }
}

Nennen Sie das Stylesheet retina.css. Zu guter Letzt müssen sich die CSS-Selektoren im Quelltext der Website abbilden, damit das Skript die betreffenden Inhalte korrekt erkennen kann.

image.jpg
Der Regler aktiviert und deaktiviert die Anzeige von Bildern in Retinaqualität auf allen Websites, die das zugehörige Skript und ein passendes Retina-Stylesheet einbinden
© Internet Magazin

Hierzu müssen Sie allen Hintergrundbildern in Retinaqualität den Klassenselektor .test-image zuzuweisen. Alle anderen Bilder, die über eine Version in Retinaqualität verfügen, werden mit dem Selektor .retina gekennzeichnet.Verfügt also etwa Beispielbild.png über eine Retinaversion, weisen Sie diesem Bild die Klasse .retina hinzu. Fügen Sie außerdem dem Namen der Retinaversion der Abbildung die Kennung @2x, im Beispiel also Beispielbild@2x.png.Beim Zugriff auf die Website mit einem retinafähigen Gerät ersetzt das Skript alle Bilder, welche die Klasse .retina aufweisen (zum Beispiel Dateiname.jpg), ganz automatisch durch ihre hochaufgelöste Version (Dateiname@2x.jpg), um dem Besucher die höchstmögliche Darstellungsqualität zu bieten.Nun haben Besucher aber die Möglichkeit, dieses Verhalten zu deaktivieren, indem Sie unter der Adresse retinaswitch.com den Regler ganz einfach in die gewünschte Position verschieben. Die Einstellung Off deaktiviert Retina-Bilder solange das zugehörige Cookie auf dem Gerät bleibt. Eine Registrierung beim Anbieter ist zum Glück nicht erforderlich.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.