Benötigen Retina-Geräte eigene Medienabfragen?

Question

Ich habe mehrere Medienabfragen, die auf Retina-Geräten ignoriert werden - zum Beispiel das iPhone 6 Plus. Die Bildschirmbreite des iPhone 6 Plus beträgt 414 Pixel. Mit der folgenden Medienabfrage würde ich erwarten, dass das Telefon die div-Klasse customClass mit einer Breite von 100% versehen würde. Aber die divs, die diese Klasse verwenden, sind immer noch 33.33333%. (Ich habe den Code unten für das Beispiel vereinfacht, Entfernen von Schwimmern etc.)

Zum Beispiel habe ich folgende CSS:

.customClass { 
    width: 33.33333%; 
} 

@media screen and (max-width: 800px) { 
    .customClass { 
     width: 100%; 
    } 
} 

Ich habe dies in meinem Header, übrigens:

Ich dachte mit dem Viewport-Meta-Tag oben würde es die Gerätebreite (414px) als Breite verwendet werden, so sollte es die 100% Breite auf .CustomClass verwenden.

Es scheint, als würde die höhere Pixeldichte dazu führen, dass die 800px breite Abfrage ignoriert wird, aber ich bin mir nicht sicher warum.

Nach vielen Lektüre und Forschung, ich bin der Meinung, dass Sie nur Retina Media-Abfragen verwenden möchten, wenn Sie @ 2x Bilder verwenden, zum Beispiel alle Retina-Bildschirme (und nicht für Website-Layout wie ich mache ich oben). Also würde ich nicht denken, dass ich Retina-Media-Abfragen wie only screen and (min-device-pixel-ratio: 2) benötigen würde, um 100% Breite an ein iPhone 6 Plus zu liefern.

Ich versuche, gerätespezifische Medienabfragen like this zu vermeiden, weil es so viele Geräte gibt, über die man sich Sorgen machen muss, es scheint unpraktisch. (Ich habe auch einige von ihnen ausprobiert, und sie funktionieren bei der Targeting bestimmter Geräte wie dem iPhone 6 Plus, aber ich suche eher etwas unter 800px auf einen Schlag.)

Also um es schnell zusammenzufassen, Wenn mein Beispielcode korrekt ist und die Antwort auf die Titelfrage ein einfaches "Nein" ist, fehlt mir dann noch etwas, wenn ich auf Retina-Geräte ziele? Möglicherweise ein größeres Problem für die gesamte Website? (Ich bitte dich nicht, dieses Problem zu finden, wenn es etwas anderes ist, werde ich tiefer graben .. aber es ist eine riesige Website;))

Vielen Dank!

Answer 1

Nein. Es gibt keine Notwendigkeit für Retina-spezifische Medienabfragen.

In der modernen Welt würden Sie Vektor- oder Zeichensatz-Icons verwenden, die unbegrenzt ohne Qualitätsverlust skaliert werden können. Bei Fotos wäre es sinnlos, für Retina-Displays etwas anderes hinzuzufügen.

Ihr oben angegebener Code ist korrekt. Beachten Sie, dass es sich bei der gerenderten Auflösung um die tatsächliche Geräteauflösung/Pixeldichte handelt. Dies bedeutet, dass das iPhone 750x1334px mit einer Pixeldichte 2 (@ 2x) ist, so dass die tatsächliche gerenderte Auflösung 375x667px ist.