web-dev-qa-db-de.com

Reaktionsschnelle Haltepunkte für iPhone 6 und 6 Plus

Laut Apples Website:

Das iPhone 6 bietet eine Auflösung von 1334 x 750 Pixel bei 326 ppi und einem Kontrastverhältnis von 1400: 1 (typisch).

Das iPhone 6+ bietet eine Auflösung von 1920 x 1080 Pixel bei 401 ppi und einem Kontrastverhältnis von 1300: 1 (typisch).

Wie lauten jedoch die jeweiligen Haltepunkte für die CSS-Medienabfrage? (Hoch- und Querformat)

Ich verstehe nicht ganz, wie man die Retina-Bildschirmgrößen mit den verschiedenen responsiven Emulatoren dort draußen testet. Jede Hilfe wäre sehr dankbar.

ioscssresponsive-designmedia-queriesiphone-6
26
user3349250

Sie verweisen auf die physischen Pixel des Geräts und nicht auf die CSS-Größen device-width. Entsprechend Tweet betragen die Gerätebreiten für die beiden:

iPhone 6: 375px (2.0 DPR)
iPhone 6 Plus: 414px (2.6 DPR)

Wenn Sie das wissen (und davon ausgehen, dass der Tweet korrekt ist) und das richtige meta viewport - Tag verwenden, sehen Sie ungefähr Folgendes:

iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)

Hoffe das hilft!

Bearbeiten:

Bezüglich des 2.6 DPR Des iPhone 6 Plus ist es tatsächlich 3.0 DPR Um 1.15 Verkleinert, was zu 2.6 DPR Führt. Weitere Informationen finden Sie unter http://www.paintcodeapp.com/news/iphone-6-screens-demystified zur Klärung (danke @mdcarter für den Link!)

53
Jack
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    /* iPhone 6+ Portrait */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    /* iPhone 6 and iPhone 6+ portrait and landscape */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    /* iPhone 6 and iPhone 6+ portrait */
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 
    /* iPhone 6 and iPhone 6+ landscape */
}

Sie können eine Liste der Medienabfragen für alle Standardgeräte abrufen hier

18
qnimate