consulta de medios CSS iPhone 5

El iPhone 5 tiene una pantalla más larga y no capta la vista móvil de mi sitio web. ¿Cuáles son las nuevas consultas de diseño receptivo para el iPhone 5 y puedo combinarlas con las consultas existentes de iPhone?

Mi consulta de medios actual es esta:

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

Otra característica útil de los medios es device-aspect-ratio.

Tenga en cuenta que el iPhone 5 no tiene una relación de aspecto de 16: 9 . De hecho es 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iphone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iphone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Referencia:
Consultas de medios @ W3C Calculadora de relación de aspecto de
comparación de modelos de iPhone

Existe esto, lo que atribuyo a este blog :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Tenga en cuenta que reacciona el iPhone 5, no a la versión particular de iOS instalada en dicho dispositivo.

Para fusionarse con su versión existente, debe poder delimitarlos con comas:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: no he probado el código anterior, pero he probado @mediaconsultas delimitadas por comas antes y funcionan bien.

Tenga en cuenta que lo anterior puede afectar a otros dispositivos que comparten proporciones similares, como el Galaxy Nexus. Aquí hay un método adicional que apuntará solo a dispositivos que tengan una dimensión de 640 px (560 px debido a algunas anomalías extrañas en los píxeles de la pantalla) y una entre 960 px (iPhone <5) y 1136 px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Todas estas respuestas enumeradas anteriormente, que usan max-device-widtho max-device-heightpara consultas de medios, sufren de errores muy fuertes: también se dirigen a muchos otros dispositivos móviles populares (probablemente no deseados y nunca probados, o que llegarán al mercado en el futuro).

Estas consultas funcionarán para cualquier dispositivo que tenga una pantalla más pequeña , y probablemente su diseño se romperá.

Combinado con consultas de medios similares específicas del dispositivo (para HTC, Samsung, IPod, Nexus ...), esta práctica lanzará una bomba de tiempo. Para la depuración, esta idea puede hacer que su CSS sea un spagetti no controlado. Nunca puede probar todos los dispositivos posibles.

Tenga en cuenta que la única consulta de medios siempre dirigida a IPhone5 y nada más , es:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Tenga en cuenta que exacto ancho y la altura , no el ancho máximo.

Ahora, ¿cuál es la solución? Si desea escribir una página web que se vea bien en todos los dispositivos posibles, la mejor práctica es utilizar la degradación

/ * patrón de degradación, estamos verificando el ancho de la pantalla solo con seguridad, esto cambiará al pasar de vertical a horizontal * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Si más del 30% de los visitantes de su sitio web provienen de dispositivos móviles, ponga este esquema al revés, proporcionando el enfoque de dispositivos móviles primero. Usar min-device-widthen ese caso. Esto acelerará la representación de la página web para navegadores móviles.

para mí, la consulta que hizo el trabajo fue:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 en vertical y horizontal

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 en paisaje

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 en retrato

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Ninguna de las respuestas funciona para mí dirigida a una aplicación phonegapp.

Como apunta el siguiente enlace , la solución a continuación funciona.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Solo una adición muy rápida ya que he estado probando algunas opciones y me perdí esto en el camino. Asegúrese de que su página tenga:

<meta name="viewport" content="initial-scale=1.0">

Puede obtener su respuesta con bastante facilidad para el iPhone5 junto con otros teléfonos inteligentes en la base de datos de funciones multimedia para dispositivos móviles:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Incluso puede obtener sus propios valores de dispositivo en la página de prueba en el mismo sitio web.

(Descargo de responsabilidad: este es mi sitio web)

afaik no iPhone usa una relación de píxeles de 1.5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

¿Debería bajar la "-webkit-min-device-pixel-ratio" a 1.5 para capturar todos los iPhones?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}