CSS responsive design - detect portrait display

user1544337 picture user1544337 · May 4, 2013 · Viewed 20.1k times · Source

I know it's with pure CSS possible to adapt the stylesheet according to screen dimensions, like this:

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

(source)

Is it with pure css possible to check on a landscape or portrait display?

Answer

mogelbrod picture mogelbrod · May 4, 2013

Yes, using the following syntax:

@media all and (orientation: landscape) {}

See the w3 specs for more information.