consulta de medios CSS iPhone 5


132

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) {}

3
¿Podemos ver sus consultas de medios existentes?
BoltClock

Respuestas:


283

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


2
Me gusta este enfoque, pero no pude hacerlo funcionar en una vista web de la aplicación PhoneGap hasta agregar -webkit-min-device-pixel-ratio como explica Stephen Sprawl zsprawl.com/iOS/2012/09/css-media-queries-for -el-iphone-5 . @media screen y (relación de aspecto del dispositivo: 40/71) y (-webkit-min-device-pixel-ratio: 2) {// iphone5 para los phonegaps}
TaeKwonJoe

Tuve que agregar and (-webkit-min-device-pixel-ratio: 2)en la consulta de medios del iPhone 5 para que funcione en la vista web de PhoneGap como lo indicó @TaeKwonJoe
Mahendra Liya el

1
¡Gracias por actualizar esto para incluir el iPhone 6!
Maverick

Esto funciona bastante bien cuando necesito diferenciar iPhone 4 y iPhone 5 en CSS.
Euccas

1
Para el iPhone 6, (relación de aspecto del dispositivo: 667/375) no funcionó en un iPhone 6 físico real. Sin embargo, funcionó en el simulador de iOS. Lo cambié a 375/667 y funcionó en el dispositivo físico.
haz lo que ahora

64

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

1
¿Puede sugerirme cómo puedo combinar esta consulta con la anterior para capturar tanto el iPhone 4 como el 5?
Maverick

66
Tenga cuidado ya que esto afectará también a otros teléfonos, no solo a los iphones. Un ejemplo es el Samsung Galaxy Nexus.
Mike Sweeney

@ MikeSweeney Buena llamada. He actualizado mi publicación con un nuevo método que no debería incluir otros dispositivos.
Eric

@Eric Eso es más o menos lo que terminé estableciéndome después de un montón de pruebas de teléfonos cruzados: ¡tuve que aportar altura a la mezcla! Parece estar funcionando muy bien en los 7-8 teléfonos que pruebo.
Mike Sweeney

¿Es correcta esta línea iPhone 5 and not to iOS 6? ¿Debería ser: "iPhone5 y no para iPhone 6"?
Sgnl

38

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.


10
Iría primero a la mejora progresiva y al móvil. Eso comienza con dispositivos móviles y se acumula utilizando min-device-width.
primavera133

2
También tenga en cuenta que la solución de alto / ancho / relación de píxeles que solo coincide con el iPhone 5 también coincidirá con el próximo teléfono que parece tener las mismas características. El tema general de su respuesta es correcto: pensar en términos de dispositivos específicos es la forma incorrecta de proceder.
Puntiagudo

@Dan: aunque su respuesta no aborda directamente la pregunta, la analiza desde una perspectiva más amplia de las mejores prácticas para un diseño receptivo. Las cosas que escribiste aquí, en mi opinión, son muy profundas y prácticas. Cinco estrellas.
Dimitri Vorontzov

@Dan: al intentar implementar tu sugerencia, algo no funciona. ¿Puedo pedirle que eche un vistazo? Stackoverflow.com/questions/16486078/…
Dimitri Vorontzov

@primavera, por favor diga por qué. ¿Cuál es la ventaja de un primer enfoque móvil?
S ..

7

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)

7

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

}

¿Por qué necesitas max-device-width : 568pxun retrato?
adi518

1
@ adi518 si no se utiliza de ancho máximo y luego se aplican las reglas CSS para cualquier dispositivo mayor que 320 píxeles, que es como, literalmente, la mayor parte de los dispositivos de tabletas - escritorios etc
Sudheer

1
¿Por qué no usar device-width: 320px and device-height: 568pxen su lugar?
adi518

5

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
}

5

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">


0

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)


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

    }
}

-3

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

1
¿Qué iPhone está usando una relación de píxeles del dispositivo de 1.5?
BoltClock

1
Recomiendo hacer consultas de medios dependiendo del ancho del dispositivo y no del nombre del dispositivo (iPhone). Entonces, si el iPhone 5 tiene más ancho, solo hazlo utilizable.
Tom Roggero
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.