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.
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 hochaufg...
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.
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.
