¿Cómo detectar la orientación del dispositivo usando CSS media queries?

@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 que no debe ser efecto a otra vista (Mob,Tab,Escritorio) de lo contrario puede ser un problema. Me gustaría sugerir escribir una consulta de medios básicos para el dispositivo respectivo que cubre tanto la vista como una consulta de medios de orientación que puede especificar el código más 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. Soy 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 Comprimido

@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 su requisito de diseño disfrute...(:

Gracias, Jitu

En Javascript es mejor usar screen.width y 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 enciende la aplicación. window.innerWidth cambia 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.width y screen.height cambian cuando el dispositivo móvil cambia entre los modos vertical y horizontal, por lo que es posible determinar el modo mediante comparando los valores. Si screen.width es mayor que 1280px, se trata de un PC o portátil.

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