¿Cómo detectar la orientación del dispositivo usando consultas de medios CSS?

Question

En JavaScript el modo de orientación se puede detectar usando:

if (window.innerHeight > window.innerWidth) { 
    portrait = true; 
} else { 
    portrait = false; 
} 

Sin embargo, hay una manera de detectar la orientación utilizando sólo CSS?

Ej. algo así como:

@media only screen and (width > height) { ... } 

Answer 1

CSS para detectar 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

Answer 2

@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 se ve como si tuviera que experiment

Answer 3

Creo que necesitamos escribir medios más específicos quer y Asegúrese de que si escribe una consulta de medios, no debe afectar a otra vista (Mob, Tab, Desk); de lo contrario, puede haber problemas. Me gustaría sugerir que se escriba una consulta de medios básica para el dispositivo respectivo que cubra tanto la consulta de medios de vista como de orientación uno que se pueda codificar más específicamente 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 ejemplo a continuación. Lo siento si mi escritura en inglés no es muy buena. Ex:

para el 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 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 de ... (:

Gracias, Jitu

Answer 4

en Javascript es mejor utilizar screen.width y screen.height. Estos dos valores están disponibles en todos los navegadores modernos. Proporcionan las dimensiones reales de la pantalla, incluso si el navegador se redujo cuando se inicia la aplicación. window.innerWidth cambia cuando se reduce el tamaño del navegador, lo que no puede ocurrir en dispositivos móviles, pero puede ocurrir en PC y laptops.

Los valores de screen.width y screen.height cambio cuando el dispositivo móvil voltea entre modos vertical y horizontal, por lo que es posible determinar el modo comparando los valores. Si screen.width es mayor que 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 portrait.width de portrait para concentrarse son 320px (principalmente iPhones), 360px (la mayoría de los otros teléfonos), 768px (tabletas pequeñas) y 800px (tabletas regulares).