0

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

This is my HTML code:

<main>
<section class="a">
  <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)*/
Yunnie Shōjo
  • 1
  • For rotation, you should use orientation: portrait || landscape. This is well documented in @media. You can read about it here. The rules stack up. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation – Dimitar Dec 24 '21 at 14:37
  • 1
    The mobile device browser's width is different than the real screen resolution. For most mobile devices screen width is about 480px. – APB Dec 24 '21 at 14:46

2 Answers2

0

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!

Deadpool
  • 7,811
  • 9
  • 44
  • 88
  • IDK, that was what the system tell to me, actually, I don't know how much will the browser get. In my case, system tell (w720 h1600) but the browser only get about (w400 h700). I see people use to calculate for that with the actual width of their screen like "if they have a 1920 screen, they with set the value to that @media like 0 to 600 is for mobile phone, and 600 to 1000 is for tablet and 1000 and up is for desktop or rotated mobile devices" and they only need to resize their browser windows, then, it's just working. And then, I feel like these messy stuff will only work fine on desktop – Yunnie Shōjo Dec 24 '21 at 18:20
  • Can you give me a link that derect me to the document to read the thing that you was said: "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!" I really really wanna know which length will corresponding for which screen resolution. There is so many questions are floating around in my head like "So, what about 4k display?", "why element with height is 1300px is really display as 1300px on my screen, but the @media isn't detect that height is 1300px but always shorter than that?" – Yunnie Shōjo Dec 24 '21 at 18:31
0

Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

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

CSS for mobile:

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

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

Dindayal Dhakar
  • 134
  • 9