ios - query - Puntos de interrupción receptivos de iPhone 6 y 6 Plus

media query mobile iphone

Question

Esta pregunta ya tiene una respuesta aquí:

• iPhone 6 y 6 Plus Media Queries 7 respuestas

Según el sitio de Apple:

El iPhone 6 tiene una resolución de 1334 por 750 píxeles a 326 ppi con una relación de contraste de 1400: 1 (típico)

El iPhone 6+ tiene una resolución de 1920 por 1080 píxeles a 401 ppi con una relación de contraste de 1300: 1 (típico)

Sin embargo, ¿cuáles serían los puntos de interrupción sensibles de la consulta de medios CSS para cada uno? (retrato y paisaje)

No entiendo completamente cómo probar los tamaños de pantalla de la retina usando los distintos emuladores sensibles que existen. Cualquier ayuda sería muy apreciada.

Answer 1

Está haciendo referencia a los píxeles físicos del dispositivo, en lugar de a los tamaños de device-width css. De acuerdo con este tweet , el ancho del dispositivo para los dos será:

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

Sabiendo que (y suponiendo que el tweet es correcto), y suponiendo que utiliza la etiqueta de meta viewport correcta, está mirando aproximadamente:

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

¡Espero que esto ayude!

Editar:

Con respecto al 2.6 DPR del iPhone 6 Plus, en realidad es 3.0 DPR reducido en 1.15 , lo que resulta en 2.6 DPR . Se puede encontrar más información en paintcodeapp.com/news/iphone-6-screens-demystified para aclaración (gracias @mdcarter por el enlace)

Answer 2

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

Puede obtener una lista de consultas de medios para todos los dispositivos estándar here