CSS @media 在手机上无法正常工作

Question

啊，我这里有个小问题，是关于@media的

这是我的 HTML 代码：

<main>
<section class="a">
  <p>AAA</p>
</section>
</main>

这是我的 CSS 代码：

* {
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)

上面的一些代码和关于我手机规格的屏幕截图，所以如果我旋转手机或打开桌面模式，那么

的高度应该改为 50vh 而不是 100vh，因为我的手机显示分辨率超过 1300px。但是问题就在那里，当我旋转手机甚至尝试打开桌面模式时，它都不起作用。 然后，过了一会儿，我尝试将最小宽度更改为 600，它的工作。所以我打开控制台，它说“宽度是 400 像素，高度是 720 像素”，我喜欢“这到底是什么？？？”

Console (screenshot)

所以，这部分我有一个大问题，因为我的显示分辨率与我的 ide 和我的浏览器分辨率不一样，无论如何我可以让我的浏览器和我的 ide 只使用我手机的相同分辨率显示而不是分成两个不同的分辨率。我还检查了另一部手机，它是 Samsung Galaxy Note 10，我知道，它不是基于任何比率来计算显示分辨率和浏览器分辨率之间的差异，我认为它是基于每个显示器的像素密度。请帮帮我。

/*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)*/

Answer 1

媒体查询始终有效

问题是你认为你对 My-Mobile 的假设总是超过 1300 像素被过分强调了。

是的，还有其他 MQ 选择器或条件，例如 (orientation: portrait || landscape)，但即使您不使用它，结果 min-widh:xx 或 max-width:xx) 也会为您获取正确的结果。

尝试添加 JS，以便在页面加载时，您还可以看到像素尺寸

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

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

使用以下函数，并添加到您的代码中，以在应用 Media-Query 时以像素为单位查看屏幕的正确分辨率是多少。您会看到 MQ 实现没有问题！

另外，据我所知，768px 对应于平板电脑，所以天知道你的手机是怎样的——假设像素宽度为 1300px，这太荒谬了！

Answer 2

使用元视口值 width=device-width 指示页面以与设备无关的像素匹配屏幕宽度。这允许页面重排内容以匹配不同的屏幕尺寸，无论是在小型手机还是大型桌面显示器上呈现。

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

移动 CSS：

@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