Q: 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

A: 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.

A: 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.
