Media Queries and Device Orientation Change

How to detect the device orientation using CSS media queries?

CSS to detect screen orientation:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

Mobile orientation change not applying CSS

My problem is related to the order of my CSS requests.

I used to define 'min-device-width' before the rest.

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... } 

But if I define it last, it works.

@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }

For more information about device-width:- check out this question

CSS Media Query Screen orientation issue

You aren't choosing an element to apply the background to

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

Should be something like:

@media screen and (max-device-width: 1000px) 
              and (orientation:landscape){
  body {
    background: red;
  }
}

The max-device-width should make it ignore desktops, if you don't put device in there, it will still affect desktops that have made their browser smaller.

---

Related Topics