Consultas de medios para iPhone 6 y 6 Plus

¿Alguien sabe tamaños de pantalla específicos para dirigirse a consultas de medios para iPhone 6 y 6 Plus?

Además, ¿el tamaño de los icons y las pantallas de bienvenida?

    iphone 6

    • Paisaje

      @media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { } 
    • Retrato

       @media only screen and (min-device-width : 375px) // or 213.4375em and (max-device-width : 667px) // or 41.6875em and (width : 375px) // or 23.4375em and (height : 559px) // or 34.9375em and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { } 

      si lo prefiere, puede usar (device-width : 375px) y (device-height: 559px) en lugar de las configuraciones max- . y max- .

      No es necesario utilizar todas estas configuraciones, y estas no son todas las configuraciones posibles. Estas son solo la mayoría de las opciones posibles para que pueda elegir las que satisfagan sus necesidades.

    • Agente de usuario

      probado con mi iPhone 6 (modelo MG6G2LL / A) con iOS 9.0 (13A4305g)

       # Safari Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1 # Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102) # Mercury Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53 
    • Lanzar imágenes

      • 750 x 1334 (@ 2x) para el retrato
      • 1334 x 750 (@ 2x) para el paisaje
    • Icono de la aplicación

      • 120 x 120

    iPhone 6+

    • Paisaje

       @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { } 
    • Retrato

       @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) and (-webkit-device-pixel-ratio : 3) { } 
    • Lanzar imágenes

      • 1242 x 2208 (@ 3x) para el retrato
      • 2208 x 1242 (@ 3x) para el paisaje
    • Icono de la aplicación

      • 180 x 180

    iPhone 6 y 6+

     @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) { } 

    Predicho

    Según el sitio web de Apple, el iPhone 6 Plus tendrá 401 píxeles por pulgada y será de 1920 x 1080. La versión más pequeña del iPhone 6 será de 1334 x 750 con 326 PPI.

    Entonces, suponiendo que la información sea correcta, podemos escribir una consulta de medios para el iPhone 6:

     @media screen and (min-device-width : 1080px) and (max-device-width : 1920px) and (min-resolution: 401dpi) and (device-aspect-ratio:16/9) { } @media screen and (min-device-width : 750px) and (max-device-width : 1334px) and (min-resolution: 326dpi) { } 

    Tenga en cuenta que la relación de aspecto del dispositivo quedará obsoleta en http://dev.w3.org/csswg/mediaqueries-4/ y se reemplazará por una relación de aspecto

    Min-width y max-width pueden ser algo así como 1704 x 960.


    Apple Watch (especulativo)

    Las especificaciones de Watch todavía son un poco especulativas ya que (hasta donde sé) no ha habido ninguna hoja de especificaciones oficial todavía. Pero Apple mencionó en este comunicado de prensa que el reloj estará disponible en dos tamaños: 38 mm y 42 mm.

    Además suponiendo … que esos tamaños se refieran al tamaño de la pantalla en lugar del tamaño total de la esfera del reloj, estas consultas de medios deberían funcionar … Y estoy seguro de que podría dar o tomar unos milímetros para cubrir cualquiera de los escenarios sin sacrificar ningún objective indeseado porque..

     @media (!small) and (damn-small), (omfg) { } 

    o

     @media (max-device-width:42mm) and (min-device-width:38mm) { } 

    Vale la pena señalar que Media Queries Level 4 del W3C actualmente solo está disponible como primer borrador público, una vez que esté disponible para su uso traerá consigo muchas características nuevas diseñadas con dispositivos portátiles más pequeños como este en mente.

    Esto es lo que está funcionando para mí en este momento:

    iphone 6

     @media only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) { 

    iPhone 6+

     @media screen and (min-device-width : 414px) and (-webkit-device-pixel-ratio: 3) 

    Esto funciona para mí para el iphone 6

     /*iPhone 6 Portrait*/ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { } /*iPhone 6 landscape*/ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { } /*iPhone 6+ Portrait*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { } /*iPhone 6+ landscape*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { } /*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){ } /*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 : portrait){ } /*iPhone 6 and iPhone 6+ landscape*/ @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ } 

    Solo para que sepa que el iPhone 6 se basa en su ancho mínimo. Cree que es 320 en lugar de 375 que se supone que es.

     @media only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) { } 

    Esto fue lo único que pude hacer para apuntar al iPhone 6. El 6+ funciona bien usando este método:

     @media screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi) { } 

    Tienes que enfocar el tamaño de la pantalla usando la consulta de medios para diferentes tamaños de pantalla.

    para iphone :

     @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { } @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { } 

    y para la versión de escritorio :

     @media only screen (max-width: 1080){ } 

    iPhone X

     /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) /* uncomment for only portrait: */ /* and (orientation: portrait) */ /* uncomment for only landscape: */ /* and (orientation: landscape) */ { } 

    iPhone 6+, 7+ y 8+

     /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) /* uncomment for only portrait: */ /* and (orientation: portrait) */ /* uncomment for only landscape: */ /* and (orientation: landscape) */ { } 

    iPhone 6, 6S, 7 y 8

     /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) /* uncomment for only portrait: */ /* and (orientation: portrait) */ /* uncomment for only landscape: */ /* and (orientation: landscape) */ { } 

    Fuente: consultas de medios para dispositivos estándar

    Para iPhone 5,

     @media screen and (device-aspect-ratio: 40/71) 

    para iPhone 6,7,8

     @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) 

    para iPhone 6 +, 7 +, 8 +

     @media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px) 

    Funciona bien para mí a partir de ahora.