CSS Media Query Screen orientation issue

Question

I am using this media query for target viewport max-width of 800px devices mininmum with of 400px

@media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}

And i need to change the color in the landscape orientation for this i use this code

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

its working good in the device but the background red applies for pc browsers also how to apply background red in devices landscape orientation only?

Thank you.

Answer 1

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.

Answer 2

try in this way

@media screen and (max-width: 800px) 
              and (min-width: 400px) {
    body {
        background: white;
    }
}

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (orientation:landscape) {
    body {
        background: red;
    }
}

or try to detect handheld-only devices looking at the min-resolution value as in http://jsbin.com/irozuf/1/edit - e.g.

@media screen and (max-width: 800px) 
              and (min-width: 400px)
              and (min-resolution: 97dpi)   /* a typical screen has 96dpi */
              and (orientation:landscape) {
    body {
        background: red;
    }
}

Looking at this list of displays by pixel density it seems that it could work fine on modern mobile devices

Answer 3

if you add these meta tags to head of page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

so the key: "width" means same "device-width".so,

@media screen and (max-device-width: 1000px){}

is equal to

@media screen and (max-width: 1000px){}

use each one you like:
[meta tags with key "width"]

OR

[no meta tags but "device-width"]