¿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 usando solo CSS?

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 está 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 ser un problema. Me gustaría sugerir que escriba una consulta de medios básica para el dispositivo respectivo que cubra tanto la vista como una consulta de medios de orientación que puede codificar más específicamente sobre la vista de orientación para una buena práctica. No necesitamos escribir ambas consultas de orientación de medios al mismo tiempo. Puede consultar Mi ejemplo a continuación. Lo siento si mi escritura en inglés no es muy buena. Ex:

Para dispositivos móviles

@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 la 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

hacer según su requisito de diseño disfrutar ... (:

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.

Leer más: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

En Javascript es mejor usar screen.widthy screen.height. Estos dos valores están disponibles en todos los navegadores modernos. Dan las dimensiones reales de la pantalla, incluso si el navegador se ha reducido cuando se inicia la aplicación. window.innerWidthcambia cuando el navegador se reduce, lo que no puede suceder en dispositivos móviles, pero puede suceder en PC y computadoras portátiles.

Los valores de screen.widthy screen.heightcambian cuando el dispositivo móvil cambia entre los modos vertical y horizontal, por lo que es posible determinar el modo comparando los valores. Si screen.widthes mayor a 1280px, se trata de una PC o computadora portátil.

Puede construir un detector de eventos en Javascript para detectar cuándo se invierten los dos valores. Los valores de ancho de pantalla vertical para concentrarse son 320 px (principalmente iPhones), 360 px (la mayoría de los otros teléfonos), 768 px (tabletas pequeñas) y 800 px (tabletas normales).