Ah, I have a little problem here, it's about the @media

This is my HTML code:

<main>
<section >
  <p>AAA</p>
</section>
</main>

This is my CSS code:

* {
margin: 0px;
padding: 0px;
}
.a {
background-color: lavender;
color: indianred;
width: 100vw;
height: 100vh;
}

@media only screen and (min-width: 1300px) {
.a {
color: darksteelblue;
height: 50vh;
}
}

My phone resolution (screenshot)

So with some line of code above and the screenshot about my phone spec, so if I rotate my phone or turn on the desktop mode, the height of that <section .....> should be change to 50vh instead of 100vh bacause my phone display resolution is ways more than 1300px. But the problem is there, it wasn't work when I rotate my phone or even when I try to turn on the desktop mode. And then, after a moment, I try to change the min-width to 600, it's work. So I open the console and it says "width is 400px and height is 720px" and me like "What the heck???"

Console (screenshot)

And so, I have a big problem with this part because my display resolution wasn't the same with my ide and my browser resolution, is there anyway I can make my browser and my ide only use the same resolution of my phone display instead of separating into two difference resolution. I also check on the another phone, it's a Samsung Galaxy Note 10, and I see, it's not base on any kind of ratio to calculate the difference between the display resolution and the browser resolution, I think it's base on the pixel density of each display. Please help me guys.

/*Before someone start to wondering 
why I don't use a computer, Imma 
say... Hmm..... yeah, I know, I 
know that I should to use a pc 
instead of a mobile phone, but I b 
don't have a pc (just for now)*/

CodePudding user response：

Media Query Does Always Work

The problem is you think that your assumption of My-Mobile is always more than 1300px is over-emphasized.

Yes there are other MQ-selectors or conditions such as (orientation: portrait || landscape) but even if you don't use it, the result min-widh:xx or max-width:xx) will also fetch you correct result.

Try add JS so that on your page load, you also see your pixel-dimensions

$(document).ready(function(){
  alert($(window).width());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Use the following function, and add to your code to see in-pixels what is the correct resolution of your screen, when Media-Query is getting applied. You'll see that there is no issue in MQ-implementation!

Also, as far as I know 768px corresponds to tablets, so God knows how your mobile is you-assume has pixel-width of 1300px, which is just ridiculous!

CodePudding user response：

It will work. Please try below code for mobile

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}