1

Buenos días a todos. Por fin me uno a esta gran comunidad después de mucho tiempo queriendo hacerlo!

Tengo las siguientes media queries:

/* Atributo "only" para que navegadores antiguos detecten los mediaqueries */

/* Diseño para móviles landscape y portrait */
@media only screen and (min-width:320px)
{
    body{
        background-color: red;
    }
}


/* Diseño para tablets landscape y portrait. Incluidos Ipad y Ipad Pro */
@media only screen and (min-width:768px){
    body{
        background-color: yellow;
    }
}

/* Diseño para resto de escritorios superiores a 1366px, 
que es la resolución máxima de Ipad Pro */
@media only screen and (min-width:1366px){
    body{
        background-color: black;
    }
}

Ahora bien, si navegamos desde Laptops con pantallas de 1366x768, aplicaría los estilos destinados a Ipads, dado que la resolución máxima de estos equipos es de 1366px.

Si cambiase el min-width:1366px por min-width:1365px, el Ipad Pro dejaría de estar incluido y por lo tanto se vería la versión de escritorio (cosa que no quiero).

He probado a incluir en los mediaqueries, condicionales con min-device-width y max-device-width, pero claro, a mi entender, si tienes dos mediaqueries con mínima resolución idéntica, se ejecutaría el último escrito. Es decir:

/* Móviles */
@media only screen and (min-width:320px) and (max-device-width:767px)
{
    body{
        background-color: red;
    }
}


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

/* Resto de equipos */
@media only screen and (min-width:768px) and (max-device-width:1920px){
    body{
        background-color: black;
    }
}

En este caso se ejecutaría siempre el último medaquery y los Ipads quedarían con entorno de escritorio. Al menos así ha respondido mi navegador...

La forma correcta de hacer esto sería:

    /* Resto de equipos */
@media only screen and (min-width:1367px){
    body{
        background-color: black;
    }
}

¿Pero qué pasa con los portátiles/laptops que sí tienen esta resolución? ¿Es posible encapsular esto de alguna manera para que haga lo que quiero? Que todo equipo que no sea Ipad, aunque tenga esa resolución, muestre la versión de escritorio.

¿O tengo que acostumbrarme a que Ipad forma parte de las resoluciones de escritorio?

Mariano
  • 23,777
  • 20
  • 70
  • 102
CGBI
  • 13
  • 3
  • En [CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?](https://es.stackoverflow.com/q/50786/127) se describen diferentes reglas según cada dispositivo. – Mariano Nov 01 '17 at 16:21

1 Answers1

1

Puedes escribir estilos específicos para tabletas añadiendo condiciones que comprueben el pixel ratio a tus media queries. Se puede hacer con -webkit-device-pixel-ratio (y sus variaciones max y min).

El iPad Pro tiene un pixel ratio de 2 (fuente), entonces lo que harías es indicar que los estilos quieres que sean para dispositivos que tengan un tamaño mínimo de 1366px Y un pixel ratio máximo de 1.5 (por poner un ejemplo).

Entonces podrías tener algo como esto:

Nota: no tengo un iPad Pro a mano, así que no he podido probar este código

/* Resto de equipos */
@media only screen and (min-width:768px) and (max-device-width:1920px) and (-webkit-max-device-pixel-ratio:1.5) {
    body{
        background-color: black;
    }
}
Alvaro Montoro
  • 48,157
  • 26
  • 100
  • 179
  • Gracias Álvaro! Justo eso pensé cuando terminé de escribir la pregunta. Que probablemente el único apoyo que tenga para controlar la exclusividad de los mediaqueries sea el pixel-ratio. En cuanto lo pruebe la doy por buena. Un saludo! – CGBI Nov 01 '17 at 16:28