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?