Share
Das neue iPad wurde letzten Monat veröffentlicht und verfügt unter anderem über ein unglaubliches Retina Display mit einer Auflösung von 2048 x 1536 Pixeln. Gleich nach der Ankündigung konzentrierte sich der Fokus auf native App-Entwickler und deren Arbeit, um Apps auf die höhere Auflösung zu skalieren.
Das war wohl der falsche Fokus. Über das Web wurde relativ wenig nachgedacht und wie das auf dem neuen Retina Display im Vorfeld der Ankündigung aussehen würde. Wir haben ein Internet mit erstaunlich knackigem Text, aber lächerlich schrecklichen Bildern von geringer Qualität. Es ist an der Zeit zu optimieren. Daher werden wir in diesem Tutorial die Strategie für das Design des Retina-Displays festlegen.
Dies ist wohl offensichtlich, aber einige werden es vielleicht noch übersehen. Mit bedeutenden Fortschritten in CSS kann die Verwendung von Bildern in der Struktur einer Site ziemlich gering oder gar nicht vorhanden sein. Dies bietet diesen Websites einen großen Vorteil, wenn es um die Retina Display-Kompatibilität geht, da von Text und von CSS generierte Grafiken vergrößert werden können, ohne die Qualität zu beeinträchtigen. Aus demselben Grund sieht Text auf einem Retina-Display messbar besser aus.
Eine Website, an der ich arbeitete, brauchte kein einziges Update des Themas, um auf dem Retina-Display gut auszusehen. Der Mangel an Bildern bedeutete, dass nichts zu aktualisieren war. Natürlich wird nicht jede Site komplett sein Sans Bilder, aber die Minimierung ihrer Verwendung reduziert den Aufwand für die Optimierung des Retina-Displays.
Im Allgemeinen gibt es einen Schritt zu dieser Taktik: Minimierung der Bildnutzung, wenn dies nicht wirklich erforderlich ist.
Natürlich ist Apples Website so optimiert, dass sie auf dem Retina-Display unglaublich scharf und scharf aussieht. In den Tagen vor der Ankündigung des iPads begann Apple, seine eigene Website zu aktualisieren, um reaktionsfähige Bilder anzubieten. Elemente, die sich abhängig davon geändert haben, ob Sie auf einem neuen iPad surfen.
Apples Methode ist im Prinzip einfach. Die Website wird wie gewohnt geladen. Sie verwenden jedoch JavaScript, um relevante Bilder zu ersetzen, wenn Sie auf einem neuen iPad surfen. Wenn Sie ein neues iPad besuchen, erhalten Sie die optimierten Bilder, wohingegen andere Browser die Standardeinstellungen verwenden.
Ein Beispiel hierfür ist Apples Heldentext auf der Produktseite des iPad, wobei der folgende Code in der Datei selbst verwendet wird.
Der Einfachheit halber teile ich ihr eigentliches Skripting nicht mit, aber im Wesentlichen wird zuerst geprüft, ob sich der Browser auf einem Gerät mit Retina-Display befindet, und dann auf das Vorhandensein eines 2x-Bildes geprüft (wir werden gleich darauf eingehen). Wenn beide Bedingungen erfüllt sind, wird das 2x-Bild angezeigt.
Die 2x-Suffix-Konvention bedeutet das Gegenstück "Retina" für die Datei image.png wäre image_2x.png. Dies kommt von iOS, das automatisch eine @ 2x Bild in einer nativen App, wenn es existiert. Leider können Webdesigner nicht auf den Luxus einer automatischen Suche und Anzeige zurückgreifen. Daher müssen wir Methoden zur Emulation mit unseren eigenen Skripts und Abfragen entwickeln.
Dies hat jedoch einen Preis. Mit dieser Methode wird der Endbenutzer geladen beide Das Nicht-Retina- und Retina-Bild bedeutet, dass die Seite mit einer höheren Dateigröße endet. Darüber hinaus bedeutet das Scripting von Apple, dass mehr Anfragen an und vom Browser gesendet werden, was zu einer längeren Ladezeit der Seite führt. Wenn Sie die Verwendung von Bildern weiterhin minimieren, wird dieses Problem natürlich auch reduziert.
Während Apple JavaScript verwendet, eine etwas effektive Methode, gibt es eine Alternative. Verwenden von CSS-Medienabfragen, um die Pixeldichte des Geräts mit Stil zu versehen.
Bevor wir darauf eingehen, ist es wichtig zu wissen, dass das Display des iPads letztlich immer noch 1024 x 768 Pixel in "CSS-Pixel" ist. Ich erlaube Dave Hyatt zu erklären.
Die meisten Website-Autoren haben traditionell ein CSS-Pixel als Gerätepixel betrachtet. Wenn wir jedoch in diese neue Welt mit hohem DPI-Wert einsteigen, in der die gesamte Benutzeroberfläche vergrößert werden kann, kann ein CSS-Pixel auf dem Bildschirm aus mehreren Pixeln bestehen. Wenn ich zum Beispiel eine Zoom-Vergrößerung von 2x einstelle, würde 1 CSS-Pixel tatsächlich durch ein 2 × 2-Quadrat von Gerätepixeln dargestellt.
Daher richtet sich die von uns verwendete Methode nicht auf die Auflösung des iPads, weil es einfach nicht funktionieren würde. In jedem Fall ist die Auflösung des iPads laut Browser immer noch 1024 x 768 Pixel. Wenn Sie diese Auflösung anvisieren, gilt dies auch für alle vorherigen iPad-Generationen. Auch die Ausrichtung auf die neue Auflösung von 2048 x 1536 Pixeln mit Medienabfragen hätte keine Auswirkungen auf das neue iPad.
Stattdessen können wir das Ziel verwenden Min-Geräte-Pixelverhältnis Abfrage. Diese Abfrage weist den Browser an, einen bestimmten Stil basierend auf dem Verhältnis von Gerätepixeln zu den zuvor genannten "CSS-Pixeln" zu laden. Bei dem mit Retina Display ausgestatteten iPad sind dies zwei (1024: 2048 und 768: 1536, vereinfacht auf 1: 2)..
Daher können wir ein "Retina" -Stylesheet basierend auf dem Pixelverhältnis des Geräts laden.
Natürlich verwenden wir das WebKit-Präfix, da der Browser des iPad Safari ist, ein WebKit-Browser, aber auch, weil die Medienabfrage momentan nur über WebKit verfügbar zu sein scheint. Da Stile kaskadiert werden (wie der Name "CSS" Ihnen sagen wird), werden die Regeln in diesem Stylesheet überschrieben, indem Sie das obige Tag einfach ordnen und die Regeln für zuvor festgelegte Geräte überschreiben.
Wenn Sie nicht alles in einem separaten Stylesheet ablegen möchten, können Sie Inline-Media-Abfragen verwenden, um Teile Ihres Stylesheets nur für mit Retina Display ausgestattete Geräte anzugeben.
Accentsconagua
@media (-webkit-min-device-pixel-ratio: 2) #element background-image ('image-2x.png'); Hinweis: Die Verwendung des "2x" -Namensschemas ist zwar eine nützliche Methode zum Organisieren Ihrer Bilder, fühlt sich jedoch nicht dazu verpflichtet. Sie können Ihren Bildern einen beliebigen Namen geben, und im Gegensatz zu nativen Apps müssen sie sich nicht einmal annähernd ähnlich sein.
Die Verwendung dieser Medienabfrage ist natürlich nicht spezifisch für das iPad. Tatsächlich wird dieselbe Logik ausgelöst, wenn Sie Ihre Website auf einem Gerät mit einer ähnlichen Pixeldichte durchsuchen, das dasselbe Verhältnis von CSS zu Gerät verwendet, einschließlich iPhone 4 und iPhone 4S. Wenn Sie nur auf das iPad zielen möchten, können Sie die Abfrage des Pixelverhältnisses einfach mit einer Breite von eins kombinieren, um nur Geräte mit Retina Display-Geräten mit der Berichtsauflösung des iPad anzugeben.
Es ist nicht der Fall, dass Ihre Website ohne Optimierung gut aussieht, aber besser aussieht mit. Sie müssen nur eine bildreiche, aber nicht optimierte Website besuchen, um zu verstehen, wie schreckliche Nicht-Retina-Bilder auf dem neuen iPad aussehen. Und letztendlich müssen Sie die Ergebnisse tatsächlich miterleben. Wenn Sie keinen Zugang zu einem neuen iPad haben, empfehle ich Ihnen dringend, einen Abstecher in einen Apple Store zu machen.
Während Apple Millionen von Geräten verkauft hat, ist das im großen Stil der Browser ein kleines Problem. Allerdings mit potenziellem Retina Display ausgestattet MacBook Am Horizont für diesen Sommer könnte sich das Einsetzen der Arbeit später wirklich auszahlen.
