Ratgeber: "HTML, CSS, Javascript & PHP"

Mobil in HD mit Retina Switch

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.

© Archiv

Mobil in HD mit Retina Switch

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.

© Internet Magazin

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

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 -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

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

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

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

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

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