queries - consulta de medios CSS de iPhone 5

queries ipad

Question

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 combinar con las consultas existentes del iPhone?

Mi consulta de medios actual es esta:

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

Answer 1

¿Debería bajar la relación "-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 */
}

Answer 2

Esto es lo que atribuyo a halgatewood.com/iphone-5-media-query :

@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 instalada en dicho dispositivo.

Para fusionarse con su versión existente, debería poder delimitarlas en coma:

@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 probé consultas @media delimitadas por comas antes, y funcionan muy 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 se enfocará solo en dispositivos que tienen una dimensión de 640px (560px debido a anomalías extrañas de píxel de pantalla) y uno de entre 960px (iPhone <5) y 1136px (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 */
}

Answer 3

Ninguna de las respuestas funciona para mí con una aplicación de Phonegapp.

Como señala el siguiente link , la siguiente solución funciona.

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

Answer 4

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
Comparación de modelos de iPhone
Calculadora de relación de aspecto

Answer 5

Puede obtener su respuesta con bastante facilidad para el iPhone5 junto con otros teléfonos inteligentes en la base de datos de características de medios 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)

Answer 6

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

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

Answer 7

Todas estas respuestas enumeradas anteriormente, que utilizan max-device-width o max-device-height para consultas multimedia, adolecen de un error muy fuerte: también se dirigen a muchos otros dispositivos móviles populares (probablemente no deseados y nunca probados, o que afectarán el 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 específicas del dispositivo similares (para HTC, Samsung, IPod, Nexus ...) esta práctica lanzará una bomba de tiempo. Para la descarga, esta idea puede hacer que su CSS sea un spagetti incontrolado. 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 el ancho y el alto exactos , no el ancho máximo, están marcados 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 usar degradación

/ * patrón de degradación estamos comprobando el ancho de la pantalla solo seguro, 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 primer enfoque para dispositivos móviles. Use min-device-width en ese caso. Esto acelerará el renderizado de páginas web para navegadores móviles.

Answer 8

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

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

Answer 9

iPhone 5 en retrato y paisaje

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

/* styles*/
}

iPhone 5 en el 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*/

}

Answer 10

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)

Answer 11

/* 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) { 

    }
}