Medios consulta ipad vs iphone4

Question

Estoy utilizando la consulta de medios de CSS para diferenciar iPhone y iPad

Aquí está mi código:

/* iphone 3 */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... } 

/* iphone 4 */ 
@media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... } 

/*iPad styles*/ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... } 

/* i have the same for landscape */ 

ahora tengo una resolución de conflictos, el uso del iPhone 4 de la misma resolución como el ipad y viceversa

¿Cómo puedo solucionar esto?

Answer 1

Modificar la consulta iPhone 4 medios para apuntar píxeles pantallas de alta densidad (= retina iPhone4)

@media screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) { ... } 

---

no se dio cuenta que reabrió la cuestión con una expansión así que aquí hay una respuesta reelaborada para apuntar tanto a iphones (3 y 4) como a ipads.

Desglose de lo que debe esperar:

• En los navegadores regulares que debe obtener el color teal fondo.
• orange en un ipad (paisaje).
• black en un IPAD (retrato)
• red en un iPhone 4 (vertical)
• pink en un iPhone 4 (horizontal)
• green en los teléfonos inteligentes regulares, por ejemplo Androids (paisaje)
• purple en un smartphone normal (vertical)

CSS

body { 
    background-color:teal; 
    -webkit-transition: background-color 1000ms linear; 
    -moz-transition: background-color 1000ms linear; 
    -o-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    body { 
     background-color:yellow; 
    } 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    body { 
     background-color:orange; 
    } 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    body { 
     background-color:black; 
    } 
} 

/* iPhone 4 - (portrait) ---------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait), 
only screen and (min-device-pixel-ratio : 2) and (orientation:portrait){ 
    body { 
     background-color:red; 
    } 
} 

/* iPhone 4 - (landscape) ---------- */ 
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){ 
    body { 
     background-color:pink; 
    } 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) 
and (max-width: 480px) { 
    body { 
     background-color:green; 
    } 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
    body { 
     background-color:purple; 
    } 
}`<!-- language-all: lang-css --> 

que formatea la @media consultas se encuentran en esta fina article encima en CSS-tricks para cumplir con algunos bits-iphone4 específica, pero en general este conjunto consulta de medios debería abarcar tanto iphones (3 y 4 con preguntas de los medios independientes) y ipads también.

Aquí hay una demostración que puedes probar en tus i-devices.

http://jsfiddle.net/andresilich/SpbC3/4/show/

Y también se puede probar las consultas sobre al http://quirktools.com/screenfly/ para ver cómo se comparan. Una cosa, sin embargo, el sitio screenfly no diferencia entre el iPhone 3 y 4 porque los navegadores comunes saltan el webkit único recuento de proporción de píxeles -webkit-min-device-pixel-ratio : 1.5 por lo que obtendrá mejores resultados probándolo en su dispositivo real.

Answer 2

Salida http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

Answer 3

iOS no admite actualmente orientation:portrait y orientation:landscape.
En lugar de Apple actualmente utiliza la siguiente:

Retrato
orientación: 0
orientación: 180 (no soportado actualmente en iPhone)

paisaje
orientación: 90
orientación: - 90

Ref: http://developer.apple.com/library/safari/#documentation/DataManagement/Reference/DOMWindowAdditionsReference/DOMWindowAdditions/DOMWindowAdditions.html

Answer 4

Excelente respuesta al uso de colores para detectar dispositivos y orientación. Sin embargo, el iPhone 4 no funcionó y solo se procesó como fondos verdes o morados.

Encontré este artículo que arrojó algo de luz. http://www.hemmachat.com/2011/04/21/iphone-website-for-good-beginnings/

Ahora, utilizando la proporción de píxeles de 2 en lugar ahora puedo conseguir rojo y marrón en un iPhone 4.

/* iPhone 4 portrait */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body { 
     background-color:red; 
    } 
} 

/* iPhone 4 landscape */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px){ 
    body { 
     background-color:brown; 
    } 
} 

Answer 5

He tratado este enlace http://jsfiddle.net/andresilich/SpbC3/4/show/ en el instrumento de medida sensible como http://mattkersley.com/responsive/ y http://ipadpeek.com .I he visto el paisaje y el modo retrato mostrando la misma vista. ¿Hay algún problema con esas herramientas?