prenderlo - modelos de iphone 6

¿Cómo apuntar iPhone 3GS Y iPhone 4 en una consulta de medios?

Question

Estoy tratando de implementar diseños alternativos tanto para el iPad / iPhone como para los iPhones anteriores.

Establecí que el mejor método es usar @media partir de la especificación CSS3.

Como tales, estas son mis consultas de medios en el minuto:

@media screen and (max-width: 1000px) { ... }

Arriba está para pequeñas pantallas de escritorio y laptops.

@media screen and (max-width: 700px) { ... }

Arriba está para el iPad y pantallas MUY pequeñas de escritorio / laptop.

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

Arriba es para iPhone 3GS y dispositivos móviles en general.

Sin embargo, el nuevo iPhone 4 con la pantalla de "retina" de All-singing all-dancing significa que tiene una relación de píxeles de 2 a 1, lo que significa que 1 pixel aparece en el navegador como 2x2 píxeles haciendo su resolución (960x640, lo que significa que desencadenar el diseño del iPad en lugar del diseño del dispositivo móvil) por lo que esto requiere OTRA consulta de medios (solo hasta ahora es compatible con el kit web):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Ahora, el asunto es ... Quiero que mi nuevo y brillante diseño de iPhone 4 se combine con el iPhone 3GS y el diseño de los dispositivos móviles, ya que ambos tendrán exactamente el mismo código CSS interno,

Por lo tanto haciendo mi pregunta;

¿Cómo creo una regla @media que apunte tanto al iPhone 4, 3GS y otros dispositivos móviles a los mismos estilos?

Answer 1

Debido a que el iPhone y el iPod touch miden el max-device-width en píxeles lógicos en lugar de píxeles físicos, incluso con la pantalla Retina (como deberían), la consulta de medios original utilizada para el iPhone debería ser suficiente:

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

Solo necesitará (-webkit-min-device-pixel-ratio: 2) si necesita enfocar la pantalla Retina por separado.

Answer 2

He estado buscando una forma de apuntar específicamente al iPhone 3 / 3GS en la segunda parte de la solicitud. La solución más aceptable que he encontrado es adaptar las consultas de medios a los parámetros fijos de un iPhone 3.

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

Para poder trabajar en esta consulta, es necesario utilizar la metaetiqueta de la ventana gráfica de Safari para corregir el navegador al 100% con lo siguiente:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Hay una pequeña cantidad de teléfonos Android que también serán recogidos en esa consulta. Con el Android Market mostrando el 18.4% de los teléfonos activos en el rango de tamaño de pantalla potencial de 320x480, solo un subconjunto de eso coincidirá con la relación dispositivo-píxel en el navegador stock webkit. No es perfecto, pero es mejor que nada en absoluto.

Listas de resoluciones de teléfonos

• Ligeramente desactualizado pero completo: http://cartoonized.net/cellphone-screen-resolution-by-size.php
• Solo 3 que figuran como posibles coincidencias aquí: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
• Instantánea semanal de Android Market: http://developer.android.com/resources/dashboard/screens.html

Toda la información fue considerada a partir de la fecha de publicación.

También por el comentario de mernen # 2 a su publicación aquí están los documentos dirigidos a dispositivos Android por densidad de píxeles: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

Answer 3

La respuesta de BoltClock me parece bastante buena en este momento.

Sin embargo, pensando en el futuro, si Apple (u otro fabricante) lanza otro dispositivo con una relación de píxeles del dispositivo de 2, esta consulta de medios también se usará para este dispositivo.

No creo que esté fuera de lugar suponer que esto sucederá, y que el nuevo dispositivo podría tener una pantalla mucho más grande, como un iPad con pantalla Retina.

Para que esta consulta solo se aplique al iPhone 4 y a los iPhones anteriores (y a cualquier otro dispositivo de un tamaño similar)

@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
}

No estoy seguro de [[IPHONE_4_WIDTH]] en este momento, no tengo ninguno, y algunos sitios dicen 480 , algunos dicen 960 . Intenta reemplazar con ambos. (Y déjame saber lo que encuentras :))

Answer 4

No estoy seguro de seguir tu pregunta. ¿Has probado tus consultas en el iPhone 4? device-width se mide en píxeles lógicos, no físicos, por lo que el iPhone 4 todavía se ajusta al criterio de ancho máximo del dispositivo: 480px.

Lo mismo ocurre con los teléfonos inteligentes avanzados de Android, que tienen una relación de píxeles de 1.5: el Nexus One tiene una pantalla física de 480x800, pantalla lógica de 320x533.