was genau ist Gerät-pixel-Verhältnis?

Kurze Antwort

Den device-pixel-Ratio ist das Verhältnis zwischen den physikalischen Pixeln und logische Pixel. Zum Beispiel, das iPhone 4 und iPhone 4S-Bericht ein device pixel ratio von 2, weil die physikalische lineare Auflösung ist doppelt logischen linearen Auflösung.

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

Die Formel ist:

Wo:

ist die physischen lineare Auflösung

und:

ist die logische lineare Auflösung

Anderen Geräten berichten von unterschiedlichen device-pixel-ratios, einschließlich der nicht-integer ersetzt. Zum Beispiel das Nokia Lumia 1020 berichten 1.6667, das Samsumg Galaxy S4 von berichten 3 und das Apple iPhone 6 Plus-Berichte 2.46 (Quelle: dpilove). Aber dies ändert nichts an der grundsätzlich, als sollten Sie nie design für ein bestimmtes Gerät.

Diskussion

CSS "pixel" ist noch nicht einmal definiert als "ein Bild-element auf einige Bildschirm", sondern vielmehr als eine nicht-lineare, Winkel-mess - von Zoll at arm ' s length. Quelle: CSS Absolute Längen

Dies hat viele Auswirkungen, wenn es darum geht, web-design, wie die Zubereitung von high-definition-Bild-Ressourcen und gezielt anwenden verschiedene Bilder in unterschiedlichen device-pixel-ratios. Sie würde nicht wollen, zu zwingen, eine low-end-Gerät zum download eine sehr hohe Auflösung Bild nur zu verkleinern, es lokal. Sie wollen auch nicht high-end-Geräte der gehobenen Klasse Bilder mit niedriger Auflösung für eine verschwommene user experience.

Wenn Sie stecken bleiben mit bitmap-Bildern, um Platz für viele verschiedene device-pixel-ratios, die Sie verwenden sollten, CSS Media Queries auf unterschiedliche sets von Ressourcen für verschiedene Gruppen von Geräten. Kombinieren Sie diese mit schönen tricks wie background-size: cover oder explizit gesetzt werden, background-size prozentuale Werte.

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'); }
}

Diese Weise kann jedes Gerät nur lädt das richtige Bild Ressource. Beachten Sie auch, dass die px Einheit in CSS immer arbeitet auf logische Pixel.

Ein Fall für Vektor-Grafiken

Da mehr und mehr Gerätetypen angezeigt, es wird schwieriger, alle von Ihnen mit ausreichender bitmap-Ressourcen. In CSS media queries ist derzeit der einzige Weg, und in HTML5, die Bild-element können Sie verschiedene Quellen für unterschiedliche Medien-Anfragen, aber der support ist noch immer nicht zu 100 %, da die meisten web-Entwickler noch Unterstützung von IE11 für eine Weile mehr (Quelle: caniuse).

Wenn Sie benötigen gestochen scharfe Bilder für die Symbole -, Linien-Kunst, design-Elemente, die keine Fotos, müssen Sie anfangen, darüber nachzudenken, SVG, welche Skalen, schön für alle Auflösungen.

InformationsquelleAutor Anders Tornblad

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

-moz-device-pixel-ratio

Gibt die Anzahl der Pixel pro Gerät CSS-pixel.

dies ist fast selbsterklärend. die Zahl beschreibt das Verhältnis, wie viel "echte" Pixel (körperliche pixerls auf dem Bildschirm) verwendet werden, die Anzeige einer "virtuellen" pixel (Größe in CSS).

InformationsquelleAutor oezi