CODEWITHSUNDEEP
cssmedia-queries
Jacob
Jacob

Reputation: 4031

Media queries not working

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.

Upvotes: 0

Views: 3975

Answers (2)

Passerby
Passerby

Reputation: 10090

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.

Upvotes: 2

Kaloyan
Kaloyan

Reputation: 7352

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;
    }
}

Upvotes: 1

Related Questions