5 Möglichkeiten zur Unterstützung von Retina-Displays mit hoher Dichte

Ein interessanter Punkt wurde von Brendan Davis in meinem letzten Beitrag "Responsive Web Design and Scrollbars: Ist Chroms Implementierung besser" angesprochen? Die kurze Antwort lautet: Nein - aber wir müssen uns etwas tiefer eintauchen und die Probleme betrachten, die sie verursachen können.

Was ist Retina?

„Retina“ ist der Markenname von Apple für Bildschirme mit Doppeldichte, andere Hersteller erstellen ähnliche Displays. Die Technologie wird in neueren iPhones, iPads, MacBook-Profis und anderen High-End-Geräten verwendet.

zum Beispiel hat das MacBook Pro 15 ″ eine Auflösung von 2.880 × 1.800 oder 220 Pixel pro Zoll. In dieser Skala können die meisten Menschen nicht in typischen Betrachtungsentfernungen einzelne Pixel bemerken - Anwendungen und Websites wären zu klein, um sie zu verwenden.

Daher kehrt das Gerät auf eine Standardauflösung von 1.440 × 900 zurück, aber die zusätzlichen Pixel können verwendet werden, um Schriftarten und Grafiken glatter erscheinen zu lassen.

Was ist das Problem?

Bitmap-Bitmap-Bilder von Standardauflösungen können auf einer Retina-Anzeige blockig aussehen. Ein 400 x 300 -Foto ist auf 800 x 600 Pixel skaliert, es gibt jedoch keine zusätzlichen Details. Dies kann im Vergleich zu glatten Schriftarten und anderen hochauflösenden Bildern spürbar sein.

reale Verwendung

Wenn Sie sich im Internet umsehen, wird Ihnen vergeben, dass jeder eine Retina -Display hat. Derzeit ist es nur in High-End-Geräten erhältlich, diese werden jedoch von Entwicklern begehrt und führt zu einem unverhältnismäßigen Volumen der Online-Diskussion. In der realen Welt liegt der Prozentsatz der Menschen, die ähnliche Displays verwenden, in niedrigen einzelnen Zahlen.

Lassen Sie es uns in den Kontext stellen: Wenn Sie sich nicht für 1% der IE6/7 -Benutzer entwickeln, sollten Sie wahrscheinlich nicht zu besorgt über Personen sein, die Rentina verwenden - zumal sie noch Ihre Website anzeigen können.

, dass retinaähnliche Bildschirme schließlich auf alle Geräte wandern werden. Es gibt wenig Grund, sich jetzt zu ärgern, aber es schadet keine Schädigung einer Vorwärtsplanung. Schauen wir uns die Optionen in der Reihenfolge der Empfehlung an…

1. Verwenden Sie SVGs und CSS3 -Effekte

Der Hinweis steht im Namen, aber skalierbare Vektorgrafiken sind…

skalierbar! als einzelne Pixel.

SVG ist für Fotos nicht praktisch, sondern ideal für Logos, Diagramme und Diagramme. Der Hauptnachteil ist ein Mangel an Unterstützung in IE8 und unten, aber Sie könnten immer einen PNG -Fallback liefern oder einen Shim wie Raphaël oder Svgweb verwenden. Siehe auch: So fügen Sie Ihrer Webseite skalierbare Vektorgrafiken hinzu.

Sie können möglicherweise auch einige Bilder vollständig ersetzen. Beispielsweise können Titel, Gradienten, Ecken oder Schatten, die als Grafik definiert sind, allein unter Verwendung von CSS3 allein reproduziert werden. Sie werden von einer besseren Qualität rendern, weniger HTTP -Anfragen und weniger Bandbreite verwenden.

2. Verwenden Sie Webfonts -Symbole

Je mehr ich Webfonts -Symbole verwende, desto mehr liebe ich sie. Schriftarten sind wie SVGs Vektoren, sodass sie skalierbar sind, sodass Sie Schriftsätze verwenden können, die Symbole enthalten. Sie sind ideal für kleine, häufig verwendete Formen wie E -Mail -Umschläge, Telefone, Widget -Steuerelemente und Social -Media -Logos. Sie arbeiten auch in jedem Browser, einschließlich IE6.

Es gibt viele kommerzielle und kostenlose Symbol -Schriftsätze:

• typicons
• Schriftart fantastisch
• ikonische
• Foundation

Oder Sie können einen gehosteten Schriftart Service wie wir lieben Symbolschriften.

Ich empfehle, Ihre eigenen kleinen Sätze benutzerdefinierter Symbole mit Online -Tools wie Fontello oder ICOMOON zu erstellen.

3. Verwenden Sie hochauflösende Bilder, wenn praktisch

Retina hat viermal mehr Pixel als Standardbildschirme. Wenn Sie ein 400 x 300-Bild (120.000 Pixel) haben, müssen Sie eine 800 x 600 Alternative (480.000 Pixel) verwenden, um es auf einem Display mit hoher Dichte gut zu machen.

Die hochauflösende Dateigröße ist jedoch möglicherweise nicht unbedingt viermal größer. Jedes Bild ist anders, aber wenn es feste Farbblöcke oder Details enthält, die weggelassen werden können, kann es praktisch sein, ein 800 x 600 -Bild zu verwenden und es im Browser zu skalieren.

Seien Sie pragmatisch: Wenn das Standardbild 200 KB und die hochauflösende Version 250 KB beträgt, besteht ein vernachlässigbarer Nutzen mit Bildersatztechniken. Verwenden Sie die bessere Version durchgehend.

4. Verwenden Sie CSS Image Ersatz

Es gibt Zeiten, in denen hochauflösende Versionen Ihres Bildes viermal größer sind-oder mehr. Unter diesen Umständen möchten Sie möglicherweise Bildersatztechniken in Betracht ziehen, d. H. Das Standardbild wird durch größere Alternative auf Retina -Anzeigen ersetzt. Der folgende Medienabfragecode könnte verwendet werden:

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

Die Nachteile:

1. Sie müssen zwei Bildersätze erstellen und pflegen.
2. Einige Browser laden beide Bilder herunter.

Denken Sie daran, dass viele dieser Benutzer Smartphones oder Tablets in langsameren mobilen Netzwerken verwenden. Das Erkennen der Verbindungsgeschwindigkeit wäre vorteilhafter als die Bestimmung der Pixeldichte.

5. Verwenden Sie JavaScript Image Ersatz

Retina Display -Erkennung kann mit dem folgenden Code implementiert werden:

var isRetina = (
	window.devicePixelRatio > 1 ||
	(window.matchMedia && window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches)
);

Sobald eine Retina -Anzeige bestimmt ist, könnten Sie:

1. Schleifen Sie alle Seitenbilder durch und extrahieren Sie die URL.
2. enden Sie "@2x" an den Dateinamen und versuchen Sie, die resultierende Bild -URL mit AJAX zu laden.
3. Wenn gefunden, ersetzen Sie das aktuelle Bild durch die hochauflösende Alternative.

Glücklicherweise wurde die harte Arbeit für Sie in Retinajs.com erledigt. Während es nur 4 KB-Gewicht hinzufügt, lädt hochdichte Anzeigegeräte zweimal herunter-obwohl das zweite Mal nach dem Laden der Seite als Hintergrundvorgang auftritt.

Mein Rat: Seien Sie praktisch und halten Sie es einfach. Verbringen Sie keine übermäßige Zeitversuche, um geringfügige Rendering -Probleme auf Geräten mit proportional wenigen Benutzern zu lösen. Natürlich ist nichts davon wichtig, wenn Ihr Chef sein neues iPad erhält und sich über die Bildqualität beschwert…

Kommentare zu diesem Artikel sind geschlossen. Haben Sie eine Frage zur Retina -Anzeige? Warum nicht in unseren Foren fragen?

Das obige ist der detaillierte Inhalt von5 Möglichkeiten zur Unterstützung von Retina-Displays mit hoher Dichte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!