Detectar orientanción del dispositivo usando CSS

Question

Realizé las pruebas en mi tablet y no sé porque razón no me funcionan los estilos ni en vertical ni en horizontal.

Este es mi código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial scale=1, maximum-scale=1">
</head>
<body>

</body>
</html>
<style type="text/css">
    /* Portrait o Vertical */ 
@media screen and (orientation:portrait) {
     /* Aquí van los estilos para las pantallas en vertical */
     background-color: blue;
} 

/* Landscape */
@media screen and (orientation:landscape) { 
    /* Aquí van los estilos para las pantallas en horizontal */ 
    background-color: red;
}
</style>

Para aplicar los media queries necesitas otros criterios. Tienes que tomar en cuenta los diferentes tamaños, y las principales marcas del mercado. Te recomiendo que leas esto: https://es.stackoverflow.com/a/50787/29967 sobre todo el apartado: **Media queries por grupos de dispositivos** — A. Cedano, Apr 16 '17 at 23:04

score 0 · Accepted Answer · answered Apr 16 '17 at 21:03

No te está funcionando simplemente porque NO estás aplicando el estilo a ningún elemento HTML, para conseguirlo, tendrías que hacer lo siguiente:

<html>
  <head>
    <style>

      @media screen and (orientation: portrait) {
        #background {
          background-color: blue;
        }
      }

      @media screen and (orientation: landscape) {
        #background {
          background-color: red;
        }
      }

    </style>
  </head>

<body id="background">

</body>
</html>

En el código que te acabo de poner SÍ se está seleccionando un elemento (en este caso con id background, lo cual el estilo si podrá ser aplicado.

También te recomiendo que el <style> lo coloques dentro del <head> ya que es recomendable que cuando se reenderizan los elementos HTML el estilo CSS ya esté definido.

Aquí tienes una sencilla y rápida guía para que lo practiques un poco más a fondo.

Espero que te haya servido de ayuda.

Detectar orientanción del dispositivo usando CSS

1 Answers1