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


159

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) { ... }

Respuestas:


435

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


66
Nota: Este valor no corresponde a la orientación real del dispositivo. Al abrir el teclado virtual en la mayoría de los dispositivos en orientación vertical, la vista se ensanchará más de lo que es alto, lo que hará que el navegador use estilos horizontales en lugar de verticales.
Johann Combrink

9
@JohannCombrink Realmente importante que hayas mencionado esto. Abrir el teclado arruinará el diseño. Bien, señalas esto.
lowtechsun

Referencia para el comentario de @ JohannCombrink: stackoverflow.com/q/8883163/363448
ndequeker

44
Puede que no sea malo aplicar un estilo diferente cuando se abre el teclado porque el área visible generalmente es más adecuada para el estilo que se aplica al modo horizontal. Por lo tanto, puede no ser un fastidio.
Muhammad bin Yusrat

Me gusta el comentario de Muhammad: si un teclado de software hace que una ventana de visualización sea más corta que ancha, la ventana de visualización sería una orientación horizontal (incluso si sostiene el dispositivo físico normalmente). El CSS está funcionando según lo previsto en mi opinión.
Benny

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


1
La orientación depende del dispositivo. Algunas tabletas informan orientación = 0 cuando está en modo horizontal. Los iPhones informan de manera diferente a las Samsung Galaxies.
BlackMagic

21

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


4

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


0

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).


Es importante tener en cuenta que iOS NO cambia los valores screen.widthy screen.heightcuando se gira el iPhone. Siempre informa los mismos valores. Debe utilizar la window.orientationpropiedad para determinar si el dispositivo se gira ... (el valor será 90 o -90 para el modo horizontal.)
interDist
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.