mini - Retina iPad CSS específico

hacer llamadas con google home mini

Question

Estoy diseñando un sitio receptivo que se verá diferente en dispositivos móviles. Tengo tres consultas de medios por separado en mi css más una consulta para mostrar retina (s).

/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}
/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}
/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}
/** RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}

Cuando el iPad está en modo vertical, recibirá la versión móvil, pero cuando esté en modo horizontal obtendrá la versión normal del sitio.

Mi problema es este, ahora con el "nuevo iPad" y la pantalla retina, ciertas imágenes de retina no están alineadas correctamente para la versión de iPad de retina de paisaje. El retina css global está anulando el CSS regular y se supone que yo supongo.

Por ejemplo, en la versión móvil, tengo una imagen de fondo centrada en la pantalla, pero en el sitio normal, se alinea a la izquierda.

¿Alguien sabe de una forma de apuntar solo imágenes de retina para iPad solo en CSS?

Gracias

Editar: Esto es con lo que estaba jugando, pero parece que no funciona:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

Answer 1

Lo averigué.

Tenía mi consulta Retina iPad debajo de todas las otras consultas, pero tenían que estar encima de las otras consultas comenzando desde la más grande a la más pequeña.

Answer 2

Tuve el mismo problema y lo solucioné usando:

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)

Para la meta-ventana yo uso:

content="width=device-width; initial-scale=1; maximum-scale=1"

No sé si esta es una solución perfecta, pero funciona.

Answer 3

Tratar:

@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
// Retina iPad specific CSS
}