Dies wird in jedem Artikel über das mobile Web erwähnt, aber nirgends kann ich eine Erklärung dafür finden, was genau dieses Attribut misst.
Kann jemand bitte näher erläutern, was Anfragen wie diese Prüfung?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Kurze Antwort

Das Gerätepixelverhältnis ist das Verhältnis zwischen physischen Pixeln und logischen Pixeln. Beispielsweise geben das iPhone 4 und das iPhone 4S ein Gerätepixelverhältnis von 2 an, da die physikalische lineare Auflösung doppelt so hoch ist wie die logische lineare Auflösung.

• Physikalische Auflösung: 960 x 640
• Logische Auflösung: 480 x 320

Die Formel lautet:

Wo:

ist die physikalische lineare Auflösung

und:

ist die logische lineare Auflösung

Andere Geräte melden unterschiedliche Gerätepixelverhältnisse, einschließlich nicht ganzzahliger. Das Nokia Lumia 1020 meldet beispielsweise 1,6667, das Samsumg Galaxy S4 3 und das Apple iPhone 6 Plus 2,46 (Quelle: dpilove ) . Dies ändert jedoch im Prinzip nichts, da Sie niemals für ein bestimmtes Gerät entwerfen sollten.

Diskussion

Das CSS- "Pixel" wird nicht einmal als "ein Bildelement auf einem Bildschirm" definiert, sondern als nichtlineare Winkelmessung des Betrachtungswinkels, der bei Armlänge ungefähr einen Zoll beträgt. Quelle: CSS Absolute Längen

Dies hat viele Auswirkungen auf das Webdesign, z. B. die Vorbereitung hochauflösender Bildressourcen und das sorgfältige Anwenden verschiedener Bilder mit unterschiedlichen Pixelverhältnissen des Geräts. Sie möchten ein Low-End-Gerät nicht zwingen, ein Bild mit sehr hoher Auflösung herunterzuladen, sondern es nur lokal zu verkleinern. Sie möchten auch nicht, dass High-End-Geräte Bilder mit niedriger Auflösung für eine verschwommene Benutzererfahrung hochskalieren.

Wenn Sie mit Bitmap-Bildern nicht weiterkommen, um viele verschiedene Gerätepixelverhältnisse zu berücksichtigen, sollten Sie CSS-Medienabfragen verwenden , um verschiedene Ressourcensätze für verschiedene Gerätegruppen bereitzustellen. Kombinieren Sie dies mit netten Tricks wie background-size: coveroder setzen Sie die background-sizeProzentwerte explizit .

Beispiel

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

Auf diese Weise lädt jeder Gerätetyp nur die richtige Bildressource. Beachten Sie auch, dass die pxEinheit in CSS immer mit logischen Pixeln arbeitet .

Ein Fall für Vektorgrafiken

Da immer mehr Gerätetypen auftreten, wird es schwieriger, alle mit angemessenen Bitmap-Ressourcen zu versorgen. In CSS sind Medienabfragen derzeit die einzige Möglichkeit, und in HTML5 können Sie mit dem Bildelement verschiedene Quellen für verschiedene Medienabfragen verwenden. Die Unterstützung ist jedoch immer noch nicht 100%, da die meisten Webentwickler IE11 noch eine Weile länger unterstützen müssen ( Quelle: caniuse ) .

Wenn Sie gestochen scharfe Bilder für Symbole, Strichzeichnungen und Designelemente benötigen , die keine Fotos sind , müssen Sie über SVG nachdenken, das sich wunderbar auf alle Auflösungen skalieren lässt.

Gerätepixelverhältnis == CSS-Pixelverhältnis

In der Welt der Webentwicklung bestimmt das Pixelverhältnis des Geräts (auch als CSS-Pixelverhältnis bezeichnet), wie die Bildschirmauflösung eines Geräts vom CSS interpretiert wird.

Das CSS eines Browsers berechnet die logische (oder interpretierte) Auflösung eines Geräts anhand der folgenden Formel:

Beispielsweise:

Apple iPhone 6s

• Tatsächliche Auflösung: 750 x 1334
• CSS-Pixelverhältnis: 2
• Logische Auflösung:

Beim Anzeigen einer Webseite glaubt das CSS, dass das Gerät einen Bildschirm mit einer Auflösung von 375 x 667 hat , und Medienabfragen reagieren so, als ob der Bildschirm 375 x 667 ist . Die gerenderten Elemente auf dem Bildschirm sind jedoch doppelt so scharf wie bei einem tatsächlichen 375 x 667-Bildschirm, da der physische Bildschirm doppelt so viele physische Pixel enthält.

Einige andere Beispiele:

Samsung Galaxy S4

• Tatsächliche Auflösung: 1080 x 1920
• CSS-Pixelverhältnis: 3
• Logische Auflösung:

iPhone 5s

• Tatsächliche Auflösung: 640 x 1136
• CSS-Pixelverhältnis: 2
• Logische Auflösung:

Warum existiert das Gerätepixelverhältnis?

Der Grund dafür, dass das CSS-Pixelverhältnis erstellt wurde, liegt darin, dass Webseiten mit höheren Auflösungen eine höhere Auflösung aufweisen und Webseiten zu klein sind, um angezeigt zu werden, wenn jedes Gerät noch ein CSS-Pixelverhältnis von 1 aufweist.

Ein typischer Vollbild-Desktop-Monitor hat eine Auflösung von ca. 24 Zoll bei einer Auflösung von 1920 x 1080. Stellen Sie sich vor, dieser Monitor wäre auf ca. 5 Zoll verkleinert, hätte aber dieselbe Auflösung. Das Betrachten von Dingen auf dem Bildschirm wäre unmöglich, weil sie so klein wären. Aber die Hersteller kommen jetzt konsequent mit Telefonbildschirmen mit einer Auflösung von 1920 x 1080 heraus.

Daher wurde das Pixelverhältnis des Geräts von Telefonherstellern erfunden, damit sie die Auflösung, Schärfe und Qualität von Telefonbildschirmen weiter verbessern können, ohne dass Elemente auf dem Bildschirm zu klein sind, um sie zu sehen oder zu lesen.

Hier ist ein Tool, das Ihnen auch die Pixeldichte Ihres aktuellen Geräts anzeigt:

http://bjango.com/articles/min-device-pixel-ratio/

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Gibt die Anzahl der Gerätepixel pro CSS-Pixel an.

das ist fast selbsterklärend. Die Zahl beschreibt das Verhältnis, wie viel "echte" Pixel (physische Pixel des Bildschirms) zum Anzeigen eines "virtuellen" Pixels (in CSS festgelegte Größe) verwendet werden.

Boris Smus 'Artikel Hochauflösende Bilder für variable Pixeldichten enthält eine genauere Definition des Gerätepixelverhältnisses : Die Anzahl der Gerätepixel pro CSS-Pixel ist eine gute Annäherung, aber nicht die ganze Geschichte.

Beachten Sie, dass Sie den DPR von einem Gerät mit verwenden lassen können window.devicePixelRatio.