CSS Media Query Screen orientation issue - html

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"]