CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Adam Bajger
Adam Bajger

Reputation: 571

CSS media query does not detect change in viewport width

I have a simple question. I have a simple CSS with media queries:

@media only screen and (max-width: 700px) {
    //some CSS A
}

@media only screen and (min-width: 700px) {
    //some CSS B
}

and this meta tag in the main html

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

my DOOGEE X5PRO has a resolution 1280x720 (according to internet) so I would expect that the B CSS will apply when viewing on the phone. But it does not. Why tho? I tried clearing data etc.

You can check for yourself: velkahra.skauting.cz

Upvotes: 1

Views: 207

Answers (2)

Adam Bajger
Adam Bajger

Reputation: 571

So apparently I checked the resolution of my screen with javascript and found out, that the resolution is way smaller. Never trust the internet.

The problem is somewhere in that my phone has 2 device-pixels for a CSS pixel. Find more on that here: what exactly is device pixel ratio?

I used this:

<script type="text/javascript"> 
    window.addEventListener("DOMContentLoaded", function(event) {
        window.alert($(window).width());
    });

</script>

There is no mistake in the code, aside of the breakpoint at 700px

Maybe it will help some newbies around.

Upvotes: 1

Cliff Rono
Cliff Rono

Reputation: 324

Your CSS looks like it's got no problems. You could try opening up console on your browser and see how your code behaves at different breaking points.

Upvotes: 1

Related Questions