¿Cómo detectar la orientación del dispositivo mediante consultas de medios CSS?
En JavaScript, el modo de orientación se puede detectar usando:
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
Sin embargo, ¿hay alguna forma de detectar la orientación utilizando CSS únicamente?
P.ej. algo como:
@media only screen and (width > height) { ... }
CSS para detectar la orientación de la pantalla:
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
La definición CSS de una consulta de medios se encuentra en http://www.w3.org/TR/css3-mediaqueries/#orientation
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
pero todavía parece que tienes que experimentar
Creo que necesitamos escribir una consulta de medios más específica. Asegúrese de que si escribe una consulta de medios no debería afectar a otra vista (Mob, Tab, Desk); de lo contrario, puede causar problemas. Me gustaría sugerir escribir una consulta de medios básica para el dispositivo respectivo que cubra tanto la vista como una consulta de medios de orientación. Puede especificar más código sobre la vista de orientación para una buena práctica. No es necesario escribir ambas consultas de orientación de medios al mismo tiempo. Puede consultar mi siguiente ejemplo. Lo siento si mi escritura en inglés no es muy buena. Ex:
Para móvil
@media screen and (max-width:767px) {
..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {
..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.
}
Para tableta
@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){
..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.
}
Escritorio
haga según sus requisitos de diseño disfrute...(:
Gracias, Jitu
Yo optaría por la relación de aspecto, ofrece muchas más posibilidades.
/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
...
}
/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
...
}
/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
...
}
Tanto la orientación como la relación de aspecto dependen del tamaño real de la ventana gráfica y no tienen nada que ver con la orientación del dispositivo en sí.
Leer más: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f
