iPhone 5 CSS consulta de medios

Hay esto, que yo doy crédito 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 de iOS particular instalado en dicho dispositivo.

Para fusionarse con su versión existente, debería poder delimitarlas por 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 consultas @media delimitadas por comas antes, y funcionan bien.

Tenga en cuenta que lo anterior puede golpear algunos otros dispositivos que comparten similares ratios, como el Nexus Galaxy. Aquí hay un método adicional que se dirigirá solo a los dispositivos que tienen una dimensión de 640px (560px debido a algunas anomalías extrañas de píxeles de visualización) y una de entre 960px (iPhone

@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 utilizan max-device-width o max-device-height para consultas de medios, sufren de un error muy fuerte: 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 rompa.

Combinado con consultas de medios similares específicas del dispositivo (para HTC, Samsung, iPod, Nexus...) this practice will lanza una bomba de tiempo. Para debigging, esta idea puede hacer que tu CSS sea un spagetti descontrolado. Nunca puedes 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 exact width and height, not max-width se marca aquí.

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 degradación

/ * patrón de degradación estamos comprobando el ancho de la pantalla solamente claro, esto va a cambiar está girando de retrato a paisaje * /

/*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 un enfoque primero para dispositivos móviles. Utilice min-device-width en ese caso. Esto acelerará la representación de páginas 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 retrato y paisaje

@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í apuntando a una aplicación phonegapp.

Como señala 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 tiene:

<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 ningún iPhone utiliza 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) { 

    }
}

Tal vez debería bajar el "-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 */
}