Media queries is not supporting at 1024x768 system resolution

Question

i have applied background color:gray for tablet, and blue color for my system browser with using of media queries css. It is working fine. Now the problem is, when i tured my system resolution to 1024x768, the tablet color - gray is applying to my system browser also instead of blue color. Please suggest me.

Below is my css:

.Box{background-color:#709bd3;height:200px}

@media screen and (min-device-width:600px) and (max-device-width:1024px) {
.Box{background-color:#ccc}
}

Which browser and OS is this problem occuring on? – Exelian Oct 20 '11 at 13:40 — Exelian, Oct 20 '11 at 13:40
Chrome and Mozilla Firefox in Windows XP & 7 – Pavan Kumar Oct 20 '11 at 13:43 — Pavan Kumar, Oct 20 '11 at 13:43

Jezen Thomas · Answer 1 · 2011-10-20T14:25:59.870

2

For a start, make sure you include a semicolon at the end of every statement.

.Box {
background-color:#709bd3;
height:200px;
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
    .Box {
    background-color:#ccc;
    }
}

I also changed min-device-width to 768px, which is the iPad's minimum.

EDIT - Looks as though you'll need to use the user agent string. Try following this:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3888106/How-Can-I-Detect-the-iPhone--iPads-User-Agent.htm

edited Oct 20 '11 at 14:25

answered Oct 20 '11 at 13:45

Jezen Thomas

13,619
6
53
91

You are right, but if i open the link in my system as well as tablet, the color(gray) shouldnt come when i changed my system resolution to 1024. – Pavan Kumar Oct 20 '11 at 13:50
Try 'only screen' instead of just 'screen'. If that doesn't work, I think the only thing you can do is use the User Agent String. – Jezen Thomas Oct 20 '11 at 14:00
"only screen" also not working. I dont know User Agent String. Can you tell me how to use that? – Pavan Kumar Oct 20 '11 at 14:04
Added a comprehensive tutorial. – Jezen Thomas Oct 20 '11 at 14:26
I don't know, but this discussion looks promising: http://stackoverflow.com/questions/5341637/how-do-detect-android-tablets-in-general-useragent – Jezen Thomas Oct 20 '11 at 15:11

Media queries is not supporting at 1024x768 system resolution

1 Answers1