1

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Adam Bajger
  • 523
  • 7
  • 20

2 Answers2

1

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.

Cliff Rono
  • 324
  • 3
  • 9
  • 1
    This answer would be more appropriate as a comment, since you're not providing a solution but a mere suggestion to keep testing. – Victoria Ruiz May 10 '18 at 13:58
  • well it behaves well on my desktop, but on phone it looks like it does not care about the orientation and even when the viewprot width changes, the width for css stays the same. Or it breaks the space-time or something. – Adam Bajger May 10 '18 at 14:07
  • and to Victoria Ruiz, he cannot post comments with 11 reputation. – Adam Bajger May 10 '18 at 18:35
1

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.

Adam Bajger
  • 523
  • 7
  • 20