portrait y landscape - que no diseño liquido

[helyanne]

Hola

Me estoy volviendo loca para hacer una maquetación de una app para tablet que siempre se vea de una manera si es landscape - independientemente del tamaño de la pantalla - y siempre se vea de otra si es portrait.

El contenido es poco y necesito que se distribuya por la pantalla en ambos modos pero todo lo que encuentro es diseño liquido que solo atiende al ancho de la pantalla.

He visto estos media- queries pero o no me funcionan o no sé testearlos:

Código PHP:

  /*CSS  por defecto - landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
 
body {
background-color:blue;
}
 
 
}
 
/*CSS  por defecto - portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
 
body {
background-color:green;
}
 
 
} 
   

Tanto mi tablet como los emuladores que he encontrado no hacen caso a estos estilos.

Voy a usar jquery-mobile, aunque soy un tanto nueva, y tampoco sé si ahí hay alguna solución a mi problema...

SOCORRO

[Pelipe]

No es muy clara tu pregunta,

...estoy trabajando en un proyecto con Bootstrap y he probado el codigo que pusiste y a mi me funciona correctamente, me cambio el fondo de azul o verde segun lo giraba, lo he probado con la Herrramienta de Diseño Web adaptable de Firefox.

- quizas sea un pequeño error de orden de herencia o tiene otro media mas adelante del actual, estos errores suelen ser muy comunes

[Wii-Fi]

Generalmente no es recomendable usar min-device- o max-device- porque eso tiene en cuenta el tamaño de la pantalla, pero no de elementos que puedan estar presentes como barras de navegación o de desplazamiento u otros, o si la ventana no está maximizada. Utiliza min- y max- a secas a no ser que tengas un motivo concreto para hacer lo contrario.

Por lo demás, no veo nada raro en tu código. Será lo que dice Pelipe.