Media queries not working - css

Question

My CSS that uses media queries doesn't detect devices correctly...
My code:
#media screen and (min-width: 240px) and (max-width: 320px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
#media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}
I want the div to be blue on a small phone like HTC wildfire and red on a tablet like iPad Mini.

Answer 1

Extending from comment:
Browsers on small devices tend to scale web pages a little bit. To get the "real" dimension for media queries, add
<meta name="viewport" content="initial-scale=1.0" />
to the head of your document.
To inspect the "rendered" dimension, use something like this:
<script type="text/javascript">
window.addEventListener("load",function(){
var box=document.body.getBoundingClientRect();
document.getElementById("whatever").value=box.width+" x "+box.height;
},false);
</script>
This may or may not prevent the scale setting of the browser itself, but will at least prevent the "auto" scaling.
In my own experience, some situations, like a <p> with long sentence, will likely causes browsers to scale down to make it more feel like "a sentence". By specifying initial-scale=1.0, Opera Mobile still scale to its setting (by default 125%), but no more than that, and the long sentence will wrap.

Answer 2

Try it with adding screen to the query.
#media screen and (min-width: 240px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
#media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}