Für die Einbindung von hochauflösenden Grafiken, aber nur für Bildschirme, die sie auch nutzen können. "Retina" bedeutet "2x"
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}Oder andere hochauflösende Bildschirme
/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}
/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}
/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}Alter Kram (nicht mehr verwenden, aus Bewahrungsgründen)
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1) {
/* Retina-specific stuff here */
}Das ist zukunftssicherer...
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}Notizen
- Das sehr seltsame
min--moz-device-pixel-ratioist wahrscheinlich ein Fehler. Man könnte auch-moz-min-device-pixel-ratioeinfügen, falls sie es beheben, aber es mit Präfix belassen. - Hier ist die Spezifikation zu Auflösungseinheiten.
Beispiel
Nehmen wir an, Sie hatten drei Haupt-Breakpoints in einem Design. Dieses Design hatte auch eine große Hintergrundgrafik, und Sie wollten, dass sie auf jedem Bildschirm (Retina oder nicht) am besten aussieht und keine Bandbreite verschwendet. Sie würden 6 Media Queries einrichten, eine für jeden Breakpoint und eine für jeden dieser Breakpoints auf Retina. Dann würden Sie das Hintergrundbild komplett überschreiben.
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
Ist dem Mozilla-Team der Tippfehler in der Deklaration bekannt?
Lol
Das Entwicklerteam ist sich dessen bewusst und ab Firefox 16 empfehlen sie genau das, was in der zukunftssicheren Version oben steht.
Werden wir Media Queries für Nicht-Retina-Displays benötigen, damit die Retina-Displays keine Hintergrundbilder doppelt herunterladen?
Ja, das wäre eine gute Idee.
Aber dann werden Geräte ohne Pixel-Ratio (oder jegliche Media Query-)Unterstützung Ihre "normalen" Auflösungsstile nicht sehen?
Wenn Ihnen wichtig ist, wie viel der Benutzer herunterladen muss, implementieren Sie nicht die Retina-Steuer.
Mehr Pixel sind keine Entschuldigung, riesige Bilder über langsame Mobilfunknetze zu zwangseinspeisen, was die Nutzer Geld kostet – oder für "unbegrenzte" Datentarife, die dazu führen, dass sie ihr Datenlimit früher im Monat erreichen, woraufhin sich ihr Netzwerk verlangsamt.
Mit einem hohen Pixelverhältnis hat das Gerät mehr Pixel, um die Seite lesbar zu machen, wenn der Benutzer herauszoomt. Geben Sie sich damit zufrieden und verschwenden Sie keine Zeit und kein Geld für Retina-spezifische Bilder. Wenn es eine Möglichkeit gibt, ein schnelles Netzwerk und ein hohes Pixelverhältnis zu erkennen, ist es vielleicht dann vernünftig.
Ich verwende einen Inline-Stil, um Bilder dynamisch als Hintergründe in einem WordPress-Theme zu laden, und verwende derzeit die data-src und data-2x Methode. Es scheint jedoch, dass dies bei IE8 nicht gut abwärtskompatibel ist. Irgendetwas mit IE8 akzeptiert nur das data-src-Attribut, wenn es weniger als 32kb ist?
Ist jemandem bekannt, wie ich diese Methode für IE8 zum Laufen bringen könnte?
Das sind großartige Snippets und ich nutze sie gut.
Aber wenn man darüber nachdenkt, ist das nicht ein bisschen eine Jagd nach dem Weißen Schimmel? Wo hört das auf? Es kommen LCD-Bildschirme auf den Markt, die 4k- und 8K-Auflösungen erreichen. Gibt es eine bessere Lösung, um diese sich schnell nähernde Bandbreite von DPIs zu unterstützen?
Ist SVG die einzig praktikable zukunftssichere Lösung?
Ich stimme Ihrem Argument zu, Rob, das ist nur zum Verrücktwerden. em sollte der Standard für Schriftartenverwaltung sein und SVG dasselbe für Bilder. Das Web ist nur eine Ansammlung von zusammengesetzten Hacks, und es scheint kein Zurück mehr zu geben. Es hat manchmal Spaß gemacht, aber es wird, gelinde gesagt, nervig.
Ich glaube, das Web war schon immer eine Ansammlung von Hacks! Erinnern Sie sich, als Tabellen verwendet wurden, um Layouts zu erstellen? Bilder, um eine gute Typografie anzuzeigen?
In vielerlei Hinsicht sind wir jetzt weniger "hacky" als je zuvor!
(Und ja, SVG und Icon-Fonts haben eine spannende Zukunft für Grafiken, aber nicht für Fotos.)
Ich verstehe Sie, Rob! Ich liebe Joels Beobachtung. Die Hacks von heute sind die akzeptierten Konventionen von morgen.
Möchten Sie die gleichen Bilder für 1,5x Bildschirmverhältnisse liefern? Es gibt einige Android-Geräte mit seltsamen Verhältnissen, ich würde normalerweise 2x-Bilder für alles ab 1,5er Verhältnis bis hin zu diesen verwenden und sie mit background-size begrenzen.
Wie bereits jemand bemerkt hat, erfordert diese Methode auch einige Überlegungen, wie Sie ältere Browser ohne Media Queries unterstützen wollen.... Mobile first Standard, IE-Stylesheets oder Feature-Detection-Klassen vielleicht? (Ich bevorzuge Letzteres)
Ich habe lange darüber nachgedacht, bis ich ein JavaScript im Web fand, das grundsätzlich Media-Query-Unterstützung zu unserem Opa hinzufügt, der die Überholspur fährt... IE.
Ich beginne damit, allgemeine Basisstile zu entwickeln und stelle sicher, dass alles zwischen 1024-1280px Breite anständig ist, da diese niedrige Auflösung wahrscheinlich bei denen zu finden ist, die immer noch altes IE verwenden. Ich setze den Body auf max-width von 1280, damit er nicht mehr skaliert, wenn altes IE auf einem größeren Bildschirm läuft. Dann setze ich max-width in einer Media Query wieder auf 100%, damit er den gesamten verfügbaren Platz nutzt. Ich füge das erwähnte JavaScript hinzu, schließe IE sofort und höre auf, es zu optimieren, und beginne, für echte Browser zu entwickeln. In der heutigen Zeit, in der Web-Clients im Grunde vier Schnittstellen in einer wollen, ist es nicht machbar, davon auszugehen, dass man Code für Telefone, Tablets, SD, HD, "Retina"-iPads (ernsthaft... Leute, die iPads kaufen, brauchen keine 3000px-Displays – das ist lächerlich – sie benutzen sie für Facebook) UND Internet Explorer 7 unterstützen kann? Ich verstehe es, es soll alles abwärtskompatibel sein, aber das ist es nicht.
Wenn ein Kunde IE8-Unterstützung zusätzlich zu allem anderen verlangt, müssen wir mehr berechnen, da dies die Projektzeit erheblich verlängert. Wenn sie auch IE7 hinzufügen, nehmen wir das 1,5-fache der zusätzlichen IE8-Supportkosten, und das sind die Kosten für die Legacy-Browserunterstützung. Normalerweise, wenn wir Nutzeranalysen durchführen und Trends betrachten, stellen wir fest, dass a) Legacy-IE "tot genug" ist, b) die Kosten für die Anpassung und den Hack von allem, um es auf altem IE gut/wie entworfen anzuzeigen, bei weitem nicht dem Aufwand, der Investition oder dem Code-Ballast entsprechen, weil c) jemand auf IE7 offensichtlich nicht darauf achtet/bemerkt, dass das Web bei ihm schlecht aussieht/funktioniert (oder er hätte sich schon längst aktualisiert) und/oder er nicht weiß, wie man einen Computer gut genug benutzt, um Webinformationen zu finden, und den Zweck der Seite nicht effektiv empfangen wird, wenn er nicht verloren ist oder ziellos surft. Die einzigen anderen Leute, die altes IE verwenden, sind möglicherweise Unternehmensangestellte von Unternehmen mit schlechter IT-Führung, die Benutzer auf altes IE7 beschränken, um "Sicherheit zu gewährleisten" (WAS?!) oder eine alte Webanwendung haben, die von sorglosen Narren kodiert wurde und nur in IE7 funktioniert (und nicht herausgefunden hat, wie man den Kompatibilitätsmodus in IE9 verwendet). Bedenken Sie, dass dieser Unternehmenskunde sehr, sehr selten ist. Alles, was über die Grundlagen hinausgeht, um IE zu unterstützen, ist, ein totes Pferd zu schlagen. Unternehmen, die so billig sind, dass sie eine Webanwendung, die sie 2001 gekauft haben (die wahrscheinlich nie funktioniert hat und den Workflow die gesamten 10 Jahre, in denen sie sie hatten, behindert hat), nicht aufgeben können, sind wahrscheinlich nicht an einer modernen HTML5 responsiven Webanwendung oder irgendetwas interessiert, das mit einer solchen Website vermarktet werden müsste. Und wenn sie es sind, werden sie die benötigten Informationen erhalten – nur nicht so, wie es ihr Designer wollte. Sie können einfach nicht die Zeitlinie sprengen, um jede uralte Technologie der Welt zu unterstützen. Wenn Sie es von Anfang an richtig bauen, wird es altes IE "gut genug" unterstützen, um Informationen bereitzustellen – dafür ist das Web da. Wenn wir IE7 unterstützen wollen, was hindert uns dann daran, dass ein Kunde AOL-Unterstützung verlangt. Die meisten sind sich der erforderlichen Arbeit einfach nicht bewusst, bis sie die längere Zeitlinie und die Legacy-Kosten sehen. Es ergibt keinen Sinn, wenn all diese Arbeit erledigt ist und sie immer noch eine schlechte Erfahrung haben, weil sie sich nicht aktualisiert haben. Wenn überhaupt, dann schreiben Sie eine Nachricht in die Fußzeile, dass sie nicht richtig angezeigt wird, weil sie sich noch nicht darum gekümmert haben, ein Upgrade durchzuführen.
IE ist hinten dran, wissen Sie, was auch nervt? Dieser Mist
-webkit-min-device-pixel-ratio: 2
min--moz-device-pixel-ratio: 2
-o-min-device-pixel-ratio: 2/1
min-device-pixel-ratio: 2
Und jetzt, da Windows 8 draußen ist und IE10 verfügbar ist, bekommen wir noch eine weitere
-ms-min-device-pixel-ratio: 2
Und ich möchte Mozilla schlagen, weil sie zufällige Deklarationen anders als die anderen gemacht haben. Auch die Art, wie Opera Webkit-Bedingungen verwendet, weil "Webentwickler faul sind und nicht alle einbeziehen". Erstens ist es lächerlich, Web-Entwicklern die Schuld zu geben, wenn Code ausgelassen wird, obwohl der Code da ist... fünf verdammte Male, und Sie weigern sich einfach, die Basisdeklaration zu lesen, weil sie noch nicht "standardisiert" ist, und die CSS-Leute des W3C müssen sich etwas einfallen lassen und mit CSS rollierende Standards einführen, wie sie es bei HTML tun mussten, und zweitens benutzt niemand verdammtes Opera. Ich lasse Opera absichtlich weg, ihr Hündinnen. Tun Sie nicht so, als wäre ich faul, wenn Sie wirklich Ihre Nutzungsanteile in meinen Analyseblättern bei 0,2% liegen. Der einsame Opera-Benutzer, der wahrscheinlich nicht einmal dieselbe Sprache sprach und zufällig auf dieser Seite gelandet war, musste die Fallback-Erfahrung sehen. Ohh nein! Kein großes Ding. Interessiert mich nicht.
Meistens, wenn ich nur Webkit-Bedingungen einschließe, liegt es daran, dass die Deklaration auf mobile Geräte abzielt. Mit dieser Aussage können Sie die Droids, iOS und Blackberries mit einem Schlag treffen. Also gut gemacht, Opera, Sie wenden Styling an, das für ein iPhone gedacht ist. Fehlschlag. Ja, ich weiß, Mozilla macht ein Firefox für Android, das kaum funktioniert, Opera hat ungefähr 15 Browser auf dem Android-Markt, die niemand benutzt, und hat Browser für verschiedene alte Handheld-Technologien entwickelt, die nicht CSS3-fähig sind, nicht mehr verwendet werden und auf dem Zweipixel-Bildschirm der Hardware nicht groß genug angezeigt werden, um etwas anderes als das Logo Ihrer Website zu zeigen. Ich werde meinen Code nur dann bis zur Unkenntlichkeit verändern, wenn die Nutzungszahlen dies rechtfertigen, und IE auf Mobilgeräten hat noch nicht genug Benutzer, damit ich mich darum kümmere, 500 Zeilen "–ms-stupid-conditional-code-killer" mit den anderen mobilen Deklarationen hinzuzufügen. Sprechen Sie nicht mit mir über faule Webentwickler, wenn CSS wegen dem 5-fachen Code geschrieben werden muss und ständig Probleme verursacht, wie Mozillas Unfähigkeit, sich an das Format der anderen zu halten. Nein, wir genießen es nicht, Google nach jedem kleinen Attribut des kleinen Hacks jedes Browsers fragen zu müssen. Nein, ich nehme nicht all diesen Code für Browser auf, die so wenig genutzt werden, dass ich mich nicht einmal darum kümmere, sie zu testen. Lesen Sie ruhig die -webkit- Deklaration von Opera, denken Sie nur daran, dass es keine Rolle spielt, denn wenn es um meine Benutzer geht, wird niemand sie sehen. Ich möchte nicht hören "Oh, Opera hat einfach gesagt, dass viele Entwickler nicht wissen, dass sie sich schmieden..." denn das ist auch Mist. Niemand vergisst es. Viele entfernen es aus Code-Snippets, die sie aus Tutorials kopieren. Deshalb bauen wir Fallbacks. Nicht vergessen. Nicht faul. Interessiert mich nicht.
Ich kann nicht glauben, dass wir das immer noch tun müssen, und ich bin sicher, dass wir uns in Zukunft darüber streiten werden, wann es angemessen ist, dies NICHT weiterhin zu tun, aber eines ist sicher – ich möchte ein paar Leuten ins Gesicht schlagen, weil sie Entwicklerprobleme nicht auf der Grundlage der Standardisierung auf die gleiche Weise lösen, wie wir es in den 2000er Jahren getan haben... als das Web kaputt und mit scheiß Code zersplittert war. Die Browser sind bereit, weil wir sie bereits benutzen. Unsere Kunden sind bereit, sie fordern es seit Jahren. Die Benutzer sind bereit, sie haben es bereits auf 4-Zoll-Bildschirmen. Viele, viele neue CSS-Spezifikationen sind bereit und warten auf die Standardisierung. Für mich sind diese bereits standardisiert, da sie auf allen Browsern gleich angezeigt werden und massenhaft im Web verwendet werden. Wenn ich "rückwärtskompatibel" höre, während ich 500 Zeilen Code in 2500 Zeilen hacke, um die tatsächlich heute verwendete Technologie zu unterstützen, werde ich jemanden umbringen. Werden Sie klar. Elektronikhersteller stellen keine Technologie her, die länger als 5 Jahre hält (zwei Jahre, wenn wir über Telefone oder Macbooks sprechen), und Marketingdirektoren und Informationsarchivare kümmern sich einen Dreck darum, dass eine 90er-Jahre-Technologie, die längst auf dem Müll liegt, ihr CSS nicht erkennt. Wenn es es nicht erkennt, ignoriert es diese Deklaration, das Leben geht weiter und am Ende wusste niemand den Unterschied, und wenn doch – es war ihnen egal, und wenn es ihnen doch wichtig war, würden sie nicht auf einer gottverdammten Wii im Web surfen. Informationen sind im Markup, wenn das da ist, hat das Web seine Aufgabe erfüllt. Ich verstehe ihre Logik, aber ich denke einfach, dass sie das Web einmal wieder kaputt gemacht haben, indem sie eine Hauptversionsstandardisierung erzwingen, die reale Welt nicht verstehen und wie das Web, an dem sie arbeiten, tatsächlich verwaltet wird, und sich dutzende Male langsamer bewegen als die Technologie selbst. Ihr kleines experimentelles Hack-Schema ist zu einem festen Bestandteil des nächsten Jahrzehnts von CSS geworden und hat bereits begonnen, Dinge kaputt zu machen.
Faule Entwickler... scheiß auf Opera.
@Andrew
Ich sage das schon seit Ewigkeiten zu mir selbst und denke, ich bin nur ein fauler Website-Entwickler, der Dinge gerne einfach macht und an Dinge wie "scheiß auf seltsame oder alte Browser, scheiß auf IE usw." denkt. Für mich ist der eine Code, den ich verwenden kann, der "die meisten Browser" abdeckt, den ich benutze und mir sage: Wenn ein Browser eine Anpassung (einen Hack) benötigt, dann ist er schuld, nicht ich, er kann mit der seltsamen Ausrichtung usw. leiden. Wenn diese Benutzer eines Tages merken, indem sie andere Browser gelegentlich ausprobieren, dass das Web auf ihrem gewählten Browser wie Scheiße aussieht, dann können sie mit ihren Füßen abstimmen und wechseln oder einfach damit leben.
Ich bin froh, Ihren Beitrag gelesen zu haben und ihn sehr genossen zu haben!
Cheers,.
^ Was er gesagt hat.
Hallo Chris, ich habe gerade ein paar Gedanken aufgeschrieben, wie man dein zukunftssicheres Beispiel vereinfachen kann. Ich dachte immer, all die herstellerspezifischen Media Queries wären ein Kopfzerbrechen. Als ich mir das genauer ansah, erkannte ich, dass man nur 2 Prüfungen in seiner Retina-/Hochauflösungs-Media-Query benötigt. Hoffentlich hilft das auch anderen Entwicklern.
Holen Sie sich das als Resolution Mixin für SASS: http://blog.14islands.com/post/37259603246/sass-resolution-mixin
// only include 1x size image for 'non-retina' screens @include if-max-resolution(1.49) { background-image: url('img/[email protected]'); } // only include 2x size image for 'retina' screens @include if-min-resolution(1.5) { background-image: url('img/[email protected]'); }Danke David für das Mixin;
Sieht so aus, als hätte IE9 ein Problem mit dieser oben erwähnten Definition.
In meinem Test lädt IE9 die Deklaration innerhalb der Media Query, wenn diese Zeile darin enthalten ist
Kann das noch jemand reproduzieren?
Ich habe das gleiche Problem. Konnten Sie dieses Problem lösen?
Haben Sie das gelöst? Wir haben das gleiche Problem auf einigen PCs (nicht allen, seltsam?), auf denen IE9 läuft.
Auf meiner lokalen Entwicklungsumgebung verhielt sich IE9 gut, dann lud ich es auf einen öffentlich zugänglichen Server als Staging-Seite hoch. Dort bei der ersten Seitenladung dachte IE9, es sei Retina, und bei der Seitenaktualisierung korrigierte es sich, seitdem funktioniert es richtig.
Keine Ahnung, warum nur beim ersten Laden oder wie man es behebt; neu in diesem Thema.
Das war mein Code
Verwendung der beiden verschiedenen Sätze zur Definition von Standard- und hochauflösenden Hintergrundbildern (um redundante Asset-Downloads zu vermeiden).
Solange jeder Browser sich nicht einigt und eine einzige Lösung findet, werden wir immer unseren Zorn in Bezug auf Gerätekompatibilität äußern. Apple, Sie mögen die wunderschöne Art haben, Ihre Informationen auf Ihren wundersamen Geräten anzuzeigen, aber denken Sie an Designer, die mit dieser Technologie arbeiten müssen. Jetzt produzieren wir 2 Bilder, wenn eines genug sein sollte…….
Okay, Andrew.
Aber warum sagst du uns nicht, wie du *wirklich* fühlst?
;)
@Andrew: Nun, du hättest nicht direkter sein können... ;) Bieten Sie ihnen einfach eine reine Textdatei an.
Diese Lösungen sind großartig für Bilder, die man in seinen Styles identifizieren kann, aber was sind die besten Lösungen für Bilder in Inhaltsbereichen wie Blogbeiträgen über WordPress?
Ich habe Probleme mit Bildern, die möglicherweise über RSS auf Partnerseiten syndicated werden.
@Jess Sie könnten sich Hammy ansehen: http://wordpress.org/extend/plugins/hammy/
Also all diese Retina und ich habe keine. Kann es mir weniger wichtig sein... Ach egal. Wie würden wir Entwickler wissen, ob es funktioniert, wenn wir es nicht sehen können? Gibt es einen Trick dafür?
Jede Hilfe, um das Bild auf einem Nicht-Retina-Display wechseln zu sehen, um zu wissen, dass es funktioniert und korrekt ausgerichtet ist, wäre nett. Kein Problem, dafür zu programmieren, aber ich muss sehen können, ob die Änderungen in Ordnung und behoben sind.
Hallo Anthony. Das ist etwas spät, aber falls Sie sich immer noch wundern... Wenn Sie kein Gerät zur Hand haben, verwenden Sie einfach den Chrome-Inspektor und emulieren Sie ein Gerät mit einem hohen Pixelverhältnis. Inspizieren Sie das Bild und sehen Sie, ob es das richtige lädt. Ich denke, andere Browser können das auch.
Im W3C-Blog gibt es einen Artikel, der besagt
Und dank der neuen Implementierung von
dppx(dots per px) und einiger Probleme mit den Verhältnissen unter 2 können wir schreiben@Andrew – Ich stimme Ihnen vollkommen zu – brillante Tirade! lol
Ich denke, das wird immer komplizierter. Das sollte ein Kopfzerbrechen für Gerätehersteller oder Browser-Engines sein.
Weil
1. Nicht alle Entwickler können sich die Geräte leisten und testen.
2. Alles wird komplizierter, wenn es riesige Hersteller gibt.
Wir können Regeln für die Hersteller oder Browser aufstellen, aber nicht für die Entwickler.
Ich stimme Bijay vollkommen zu
Ich brauche herunterladbare Retina-fähige Icons. Ist das wie Textformat oder Vektor? Wo sind die Retina-fähigen Icons?
Benutzen Sie Font Awesome für Icons
Ich denke, Apple, Samsung und wer auch immer sonst Retina (und andere Hi-DPI-Markennamen)-Geräte herstellt, sollte sich um die richtige DPI von Bildern (NICHT Text) kümmern.
* Die Hersteller können diese Bildauflösungs-Upscaling leicht in Hardware erkennen und durchführen.
* Es ist eine Plage, 2 Sätze von Bildern mit ImageMagick aus einem Bild mit normaler Auflösung erstellen zu müssen. Verdammt, es ist einfach nur Breite x2 und Höhe x2. Es verschwimmt nicht einmal. Und ImageMagick erstellt die hochskalierten Bilder ohne Probleme auf einem Server ohne Hardwarebeschleunigte Grafikanzeige.
* Media Queries sind eine nie endende Wartungsbelastung.
* Ältere/Pre-Retina-Webseiten werden auch von Geräten mit Retina-Displays besucht. (Danke, Leute.)
* Wenn Unternehmen neue Hardware einführen, können sie nicht die gesamte Last auf die Entwickler abwälzen: "Hier ist eine neue Art von Bildschirm. Uns egal, dass Sie mehr (schätzungsweise) Arbeit haben. Erledigen Sie es einfach."
* Hersteller erstellen Geräte/Gadgets für eine Lebensdauer von maximal 18-24 Monaten. Besonders Apple ist daran schuld (aber nicht allein), wenn man bedenkt, dass das eigene Gerät keine iOS-Updates mehr erhält. Warum also versuchen, Dinge perfekt zu machen? Gut genug reicht.
* Webseiten für Geschwindigkeit und Größe optimieren, weil sie von einem bandbreitenbeschränkten Gerät verarbeitet werden und sie dann mit x2-Bildern (die eigentlich 4-mal so groß sind wie die normalen) füllen, ist kontraproduktiv. Wenn nicht sogar völlig dumm. Ein großer Fauxpas der Hersteller. Und sie blockieren die automatische Wiedergabe von Videos, um die Bandbreite des Kunden zu schützen, und erlauben das automatische Herunterladen von Megabyte-großen Retina-Bildern. Während sie unsere normalen DPI-Bilder auf die physischen Hi-DPI-Auflösungen des Geräts hätten hochskalieren können.
Deshalb werde ich wahrscheinlich aufhören, zweite Sätze von Bildern für Hi-DPI-Geräte zu erstellen. Wenn Apple, Samsung und andere keine "gewisse Substanz" dafür haben, wie alte oder neue Inhalte auf diesen Geräten aussehen, warum sollte ich das tun? Es ist nicht mein Produkt.
Wie schwierig kann es sein, eine neue Herstellereigenschaft zu entwickeln und uns zur Verfügung zu stellen, um ein Bild mit normaler DPI auf die physische DPI des Retina-Displays hochzuskalieren?
Als Entwickler müssten wir diese Herstellereigenschaft nur auf regulären DPI-Bildern angeben.
Im Hintergrund können die Hersteller dieses DPI-Upscaling sogar für das spezifische Gerät optimieren, auf dem es läuft.
Warum können sie so clever sein, Retina-Displays zu erfinden und zu produzieren, und so zurückgeblieben, dass sie das Hardware-Upscaling von DPIs nicht in Betracht ziehen und implementieren?
P.S.
Ersetzen Sie Retina durch, was auch immer Samsung und andere ihre Hi-DPI-Bildschirmtechnologie nennen.
Dies ist keine Beschwerde gegen Apple, es ist nur, dass Retina zum Namen einer Produkttechnologie geworden ist. (Ähnlich wie Hoover.)
Ich denke, das Problem liegt darin, dass die Hardwarehersteller tatsächlich für ihre Auflösung Anpassungen vornehmen, aber sie gehen vom kleinsten gemeinsamen Nenner aus, was die Gestaltung der Webseite angeht. Sie wollen, dass das Gerät mit möglichst vielen Seiten funktioniert. Daher funktionieren Ihre Media Queries erst, wenn Sie Ihre Webseite auf 1x einstellen, wodurch das vom Hersteller festgelegte Seitenverhältnis überschrieben wird. So funktioniert Ihr Flex-Design, aber die Last liegt nun bei Ihnen (dem Designer), alles geräteübergreifend zum Laufen zu bringen!
Die Lösung ist einfach, aber niemand scheint sie zu sehen. Kehren wir zu dem zurück, was wir früher bei Papier gemacht haben: tatsächliche Messungen (cm, Zoll). Das nimmt die Pixeldichte komplett aus dem Spiel. Sicher, Bilder werden dann immer noch als Pixel in Photoshop skaliert, aber sie werden in tatsächlicher Größe in CSS markiert. Die Softwareebene des Renderns der Absichten des Autors kann dann zwischen Browser und Betriebssystem gehandhabt werden. So funktionieren die Media Queries, wie sie beabsichtigt waren: um die Größe des Bildschirms zu beurteilen, auf dem der Benutzer die Seite sehen wird.
Noch etwas... für diejenigen unter Ihnen, die sich Sorgen um die Erstellung mehrerer Bilder für verschiedene Geräte machen. Ist das wirklich notwendig? Adobe Illustrator und Photoshop haben eine "Speichern für Web"-Funktion, mit der Sie Ihr Bild als PNG speichern können. Ich habe sie verwendet und einige Grafiken von sehr hoher Qualität (und manchmal auch Bilder) mit kleinen Dateigrößen erstellt. Grafiken bei 128 Farben sehen manchmal sogar besser aus als bei 256 Farben. Für hochwertige Bilder könnten Sie vielleicht etwas wie Cloud Zoom verwenden? Nur ein paar Vorschläge.
PNG-Dateien sind der beste Weg für Vektorgrafiken, aber nicht für Fotos. Obwohl es einen Trend gibt, SVG zu verwenden, das eher einer EPS-Datei ähnelt, wird SVG immer noch nicht von allen Browsern unterstützt. PNG gibt es schon lange und die neuere Version enthält eine Transparenzschicht, so dass es praktisch wie die Verwendung von EPS-Dateien ist, die natürlich nur für den Druck und nicht für das Web verwendet werden können.
Die Probleme mit Retina-Displays sind in diesem Stadium wirklich verwirrend, und niemand scheint eine klare Antwort zu haben, wenn es doch nur mehr Einheitlichkeit in den Browsern gäbe!
Chris, ich wollte Ihnen nur für Ihre Bemühungen auf dieser Seite danken. Sie liefern einige unschätzbar wertvolle Informationen, und ich schätze sie sehr. c
Dem stimme ich voll und ganz zu; insbesondere schätze ich es sehr, dass Sie alte Beiträge zurückverfolgen und mit den neuesten Entwicklungen aktualisieren. Das ist so wichtig in einer Welt, in der alte Blogbeiträge in den Suchergebnissen ganz oben erscheinen und den Leuten weiterhin veraltete Informationen liefern können.
Hilfe, wenn Sie Zeit haben.
Ok, ich verwende eine ziemlich Standard-Media-Query für Retina-Geräte.
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-spezifische Dinge hier */
}
Auf einigen Android-Geräten/Browsern (speziell S3, mit Chrome) sieht es so aus, als würde das Retina-Bild geladen, aber die background-size-Eigenschaft wird nicht geladen. Das Bild nimmt also mehr Platz ein, als es sollte.
Ist jemandem so etwas schon untergekommen oder hat er eine Ressource, die mich in Richtung einer Lösung leiten könnte.
Danke Jungs.
Haben Sie eine background-size-Angabe in Ihrem CSS? Ich denke, das ist notwendig, um einige Browser daran zu hindern, den Hintergrund zu skalieren, um die Auflösung auszugleichen. Wenn Ihr Retina-spezifisches Hintergrundbild also 200 x 200 Pixel groß ist, würden Sie "background-size: 100px 100px" definieren.
würde das bedeuten, dass Sie eine Reihe von Bildern benötigen würden, die
2560px breit
1920px breit
1540px breit
960px breit
480px breit
für ein Hintergrund-Cover-Bild
Wenn ich ein 2x-Auflösungs-Hintergrundbild auf einem mobilen Gerät mit 1,5-facher Auflösung oder 1-facher Anzeige serviere, was sollte dann passieren? Mit anderen Worten, ist die Bildauflösung größer als die Displayauflösung... Wird das Bild genau in der Displayauflösung angezeigt oder...? 2x-Bilder für Retina, welche Auflösung ppi... muss man normalerweise haben, um das in Fireworks oder Photoshop oder Gimp zu erstellen?
Ich habe ein Problem mit einem Projekt auf einer responsiven Website. Auf dem Computer zeige ich 10 Bilder pro Zeile an, aber auf dem Telefon nur 5 Bilder pro Zeile.
Hallo Herr Chris Coyier, vielen Dank für Ihre Vorschläge, und ich verstehe eine Sache nicht. Sie haben viele CSS für Retina-Displays erwähnt, welches CSS soll ich für Retina-Displays verwenden?
Danke im Voraus..
Gibt es einen Grund, warum Sie
min-resolution: dpiStatt
max-width: pxverwenden? Wenn Retina-iPads eine Auflösung von 2048 x 1536 haben, würde ich denken, dass der Code dafür so etwas wie
@media (-webkit-min-device-pixel-ratio: 2),(max-width: 2048px;) {
.mobile: css;
}
wäre. Ich habe auch eine Frage: Wenn Sie bedingten Code für ein Verhältnis von 1,5 festlegen, wird dieser dann auch auf Verhältnisse von 2,0 angewendet? Oder wird standardmäßig auf das Verhältnis 1,0 zurückgefallen?
@Alan,
Der Grund dafür ist, dass es möglich ist, einen z.B. 30-Zoll-Monitor mit 2048 horizontalen Pixeln sowie ein 10-Zoll-Tablet mit derselben Anzahl von Pixeln horizontal zu haben.
Die DPI des 30-Zoll-Monitors wären jedoch ein Drittel der DPI des Tablets:
2048/30vs.2048/10.Ich persönlich mag die Tatsache nicht, dass das W3C für diesen Zweck den Begriff
{min, max}-resolutiongewählt hat, da der richtige Begriff Pixeldichte und nicht Pixelauflösung ist.Hallo,
Woher haben Sie
min-resolution: 192dpi? Wenn wir davon ausgehen, dass Bilder normalerweise72dpisind, sollte es dann nichtmin-resolution: 144dpisein? Und wenn wir bedenken, dass die Pixeldichte des iPhone 4326dpibeträgt, sollte es dann nichtmin-resolution: 326dpisein?@Quoterature
Ja, aber das sollte doch der Sinn der Sache sein.
@media (-webkit-min-device-pixel-ratio: 2),Da sowohl ein iPhone als auch ein vollwertiges iPad die gleiche DPI/Pixel-Ratio haben, ein iPhone aber nur 640 Pixel breit ist, während das iPad 1536 Pixel breit ist. Wie erstellt man unterschiedliche Designs für jedes dieser Geräte, wenn man nicht zwischen maximalen Auflösungen unterscheidet?
Hallo,
Ich habe dasselbe Problem. Ich muss zwischen Pixelgröße für verschiedene Layouts unterscheiden.
und das iPad bricht komplett zusammen, während alles, was 320px ist, fest ist.
Wenn ich Element inspiziere, wird die iPad-Query ignoriert und die 320px-Query mit (-webkit-min-device-pixel-ratio: 2) wird verwendet.
CSS funktioniert wie Wenn-Dann-Anweisungen, und es ist so, als ob min-device-width und max-device-width und webkit....2.0 falsch registriert werden und das iPad denkt sich, nun, 320px ist wahr.
Haben Sie eine Lösung gefunden? Ich debugge für Android und möchte die iPad-Query so belassen, wie sie ist, da sie funktioniert, wenn ich die 320px-Query nicht habe, die für Galaxy-Telefone bestimmt ist.
Für wen soll ich das verwenden => http://atmedia.info/ um Medieninformationen des Geräts zu überprüfen...
@media
(-webkit-min-device-pixel-ratio: 2) und (width: 720px),
(min-resolution: 192dpi) und (width: 720px) Diese Media Query wird auf Android-Geräten und Google-Emulatoren nicht unterstützt.
Sehr hilfreiche Dinge, aber ich habe eine Frage. Vielleicht übersehe ich etwas.
In diesem
@media only screen and (min-width: 1300px) {
/* Großer Bildschirm, nicht Retina */
}
Vorher hatten Sie die Prüfung auf Retina, was Sinn macht. Sie schrieben /* Großer Bildschirm, nicht Retina */, aber ich sehe hier keine Retina-Ausschluss.
Ich würde etwas wie das hier erwarten:
@media
only screen and (-webkit-max-device-pixel-ratio: 1.9) and (min-width: 1300px),
only screen and ( max–moz-device-pixel-ratio: 1.9) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 1.9/1) and (min-width: 1300px),
only screen and ( max-device-pixel-ratio: 1.9) and (min-width: 1300px),
only screen and ( max-resolution: 191dpi) and (min-width: 1300px),
only screen and ( max-resolution: 1.9dppx) and (min-width: 1300px) {
/* Mittlerer Bildschirm, Retina, Dinge, die die obige Media Query überschreiben */
}
Irgendwelche Gedanken?
Ups,
Ich hätte das ersetzen sollen
/* Mittlerer Bildschirm, Retina, Dinge, die die obige Media Query überschreiben */
durch das
/* Großer Bildschirm, nicht Retina */
Vergessen Sie es. Ich verstehe es mit dem eigenartigen Überschreibungs-Zeug. (Ich bin neu in CSS und das Fehlen von "else" hat mich etwas Zeit zum Verstehen gekostet) Könnte man davon ausgehen, dass CSS nicht gerade von Programmierern entworfen wurde?
@media-Queries und CSS im Allgemeinen verhalten sich sehr ähnlich wie ein
switch-Block, wenn keiner dercases mit einem break-Statement beendet würde. Das ist eine leichte Vereinfachung, da sie die Spezifität nicht berücksichtigt, aber im Grunde ermöglicht das Durchfallen, dass alle zuvor deklarierten Regeln von einem späterencaseüberschrieben werden können (um die Analogie fortzusetzen).Hallo! Ich habe den obigen Ausschnitt ausprobiert und aus irgendeinem Grund übernimmt das iPad mit Retina die CSS-Stile von 320px wegen des -webkit-min-device-pixel-ratio: 2. Ich versuche, unabhängige Stile zu haben, die nur die richtige Query betreffen. Ich habe es auf viele verschiedene Arten versucht, und solange ich -webkit-min-device-pixel-ratio: 2 habe, übernimmt das iPad es und das iPad-Layout bricht zusammen.
Ich habe das hier zum Anfang ausprobiert
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min–moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/ * Stile * /
}
Meine iPad-Query lautet:
@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {}
Was komplett von der 320px-Query überschrieben wird.
Any suggestions?
Hallo Kris, können wir ein Update für diesen Beitrag aus dem Jahr 2014 erhalten?
Das wäre wunderbar!
+1 für eine aktualisierte Version...
Warum unterstützt CSS nicht einfach eine "Punkt"-Einheit, damit ich eine Media Query in Bezug auf verfügbare Gerätepixel ausdrücken kann, anstatt mit px- und dppx-Einheiten zu kämpfen? Für Browser trivial zu implementieren, oder?
Stop the Pain
Das steht oben
"Wenn Ihnen wichtig ist, wie viel der Benutzer herunterladen muss, implementieren Sie nicht die Retina-Steuer."
Ich sage: "Wie?"
Ich habe sehr spezifische Hintergrund- und überlagerte Bilder, die ich auf Bildschirmen mit <480px öffnen möchte, und unterschiedliche Sätze für größere Größen.
Welchen Code benötige ich, damit Retina ignoriert wird.
Z.B. iPhone 3 und 4 (und viele Android) öffnen ein 320px-Hintergrundbild über die gesamte Breite, laden kein 640px-Bild herunter, das ich für größere Bildschirme habe.
Danke
Github?
Aus einem FE-Framework leihen?
Jemanden bezahlen?
Selbst programmieren?
Hah! Hah!
Das Folgende funktioniert immer noch brillant.
Aber wie er in der Readme des Repos unter "Project status" erwähnt, gibt es jetzt andere neuere Optionen in HTML. Aber diese Lösung des Repos funktioniert auch mit älteren Browser-Engines. Ich benutze sie immer noch. : https://github.com/MattWilcox/Adaptive-Images
Ich habe adaptive-images.php ursprünglich für mein Framework angepasst.
Aber später habe ich adaptive-images.php durch Code aus diesem Repo ersetzt: https://github.com/lencioni/SLIR
Sie müssen das Lesen des Cookies, das von adaptive-images gesetzt wird, hinzufügen und dann auch Methoden zum Ändern der Größe mit den Werten aus dem gerade gelesenen Cookie hinzufügen.
Sie können SLIR durch Vorab-Caching erheblich beschleunigen. Schreiben Sie ein (PHP-)Skript, das die Methoden von SLIR für gängige Bildschirmgrößen aufruft. Zum Beispiel ist das iPhone 5 ziemlich beliebt, ermitteln Sie alle seine möglichen Porträt- und Landschaftsgrößen, berücksichtigen Sie auch Retina, und rufen Sie die Methoden von SLIR auf, um für jede Größe aller Bilder der Website ein skaliertes Bild zu generieren.
Wenn jemand zum allerersten Mal mit einem iPhone 5 besucht, ruft SLIR ein gecachtes Bild ab, anstatt es als Teil der ersten Anfrage neu zu skalieren.
Oder aktivieren Sie vor dem Live-Schalten mit SLIR den Wartungsmodus.
Schalten Sie Ihre Analysen aus.
Stellen Sie die neue Version der Website mit adaptiven Bildern und SLIR bereit.
Besuchen Sie die neue Version der Website mit so vielen verschiedenen Geräten, wie Sie haben. Dies wird vorab gecacht.
Schalten Sie Ihre Analysen ein.
Entfernen Sie den Wartungsmodus.
Was ist mit image-set?
https://www.html5rocks.com/en/mobile/high-dpi/
Danke Mattia, das ist eine gute Lösung.
Vermeidet, dass Retina-Displays Bilder zweimal herunterladen, und es wird von Chrome und Safari unterstützt.
http://caniuse.com/#feat=css-image-set
Das ist großartig! Ich muss das auch in jQuery verwenden... Ich weiß, das ist eine CSS-Seite, aber kann mir jemand in die richtige Richtung weisen?
Wie ziele ich auf S7 und S7 Edge? Eines hat einen 5,1-Zoll-Bildschirm und das andere einen 5,5-Zoll. Media Queries müssen geändert werden, um in letzteres zu passen.
Ist das noch aktuell?
Sie sollten sich auf unseren aktuelleren Leitfaden zu Media Queries beziehen