web-dev-qa-db-fra.com

Points de rupture réactifs pour iPhone 6 et 6 Plus

Selon le site d'Apple:

L'iPhone 6 a une résolution de 1334 x 750 pixels à 326 ppp avec un taux de contraste de 1400: 1 (typique)

L'iPhone 6+ a une résolution de 1920 x 1080 pixels à 401 ppp avec un taux de contraste de 1 300: 1 (typique)

Toutefois, quels seraient les points d'arrêt réactifs de la requête de média CSS pour chacun? (portrait et paysage)

Je ne comprends pas très bien comment tester les tailles d'écran de la rétine à l'aide des différents émulateurs réactifs disponibles. Toute aide serait très appréciée.

ioscssresponsive-designmedia-queriesiphone-6
26
user3349250

Vous faites référence aux pixels physiques du périphérique plutôt qu'au css device-width tailles. Selon ceci Tweet , les largeurs de périphérique pour les deux seront:

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

Sachant cela (et en supposant que le Tweet est correct), et en supposant que vous utilisiez le meta viewport tag, vous regardez en gros:

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

J'espère que cela t'aides!

Modifier:

En ce qui concerne la 2.6 DPR de l'iPhone 6 Plus, c'est en fait 3.0 DPR réduit par 1.15, ce qui entraîne 2.6 DPR. Plus d'informations peuvent être trouvées sur http://www.paintcodeapp.com/news/iphone-6-screens-demystified pour clarification (merci @mdcarter pour le lien!)

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 */
}

Vous pouvez obtenir la liste des requêtes multimédia pour tous les appareils standard ici

18
qnimate