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?

1

1 respuesta 1

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;
    }
}
1
  • 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
    Commented el 1 nov. 2017 a las 16:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.