Question

This turns out to be really interesting, I have got my question and replies in this site
media queries and to adapt the ready made site
Now it seems that they only target “width”, what about the height of the screen, the one that is long in width and short in height ?

I would like to fit my topmenu+body+footer into a height of 800px, and also tried out

@media all and (min-height: 768px) and (max-height: 959px) {
div#container{
  position:relative;
  margin:0 auto; 
  height:70%;
  min-height:70%;}

div#content {
  min-height: 350px;
}
}                  

but it is useless.

Answer 1

You can detect portrait or landscape using:

/* Portrait */
@media screen and (orientation:portrait) {

}

or

/* Landscape */
@media screen and (orientation:landscape) {

}

Or, if you want to be more precise:

@media screen and (device-aspect-ratio: 16/9) {

}

or, more commonly used:

@media all and (max-height: 1000px) and (min-height: 700px) {

}