媒体查询为何不适用于移动设备？

Question

从屏幕上可以看到，我确实有一个媒体查询CSS

@media only screen and (max-width: 600px) {
  .block {
    background-color: lightblue;
    width: 100%;
    margin-top: 20px;
  }
}

但是对于600像素以下的移动设备，该区块将无法显示浅蓝色背景；但可以使用桌面浏览器调整大小。

为什么？

详细代码，其中：https://codepen.io/dotku/pen/VwZGKYV

Answer 1

@Reza的注释有效，即添加视口元。

activityPayload.Action

Answer 2

我不知道您要在哪种移动设备上进行测试，但是我假设您不知道设备像素与实际CSS像素之间的差异：CSS像素是一种抽象超过设备规格中的实际像素，以使网页在所有不同的设备尺寸上都保持一致。

公式：

CSS pixels = Physical resolution / Device Pixel Ratio 

Device Pixel Ratio本身由每个设备上的每个浏览器确定。

在我的手机上，您的代码笔可以正常工作并显示蓝色。我建议您检出this codepen，这将显示您的设备像素比率和逻辑分辨率。您的设备很可能具有大于600像素的CSS宽度。

Answer 3

在我的手机上，给定的Codepen示例可以在没有 meta 标签的情况下使用（颜色更改， meta 标签仅用于缩放，因此这意味着可以正确读取@media查询） 。 另外，某些新手机或平板手机在纵向模式下的虚拟分辨率为800px，因此应该在这些设备上测试网站。

如果颜色不变，请尝试删除手机上的Chrome缓存：https://support.google.com/accounts/answer/32050?co=GENIE.Platform%3DAndroid&hl=en

两天前，我遇到了同样的问题，尤其是在Chrome更新后的昨天（似乎只是忽略对@media查询的任何更改，该更改在响应模式下在桌面上正确显示）。 在使用适用于Android的Firefox（正常工作）测试了网站，并且Chrome无法在@media查询（背景颜色）之外反映CSS的某些更改之后，很明显Chrome并未从服务器加载更改的CSS文件，但是使用了一些较旧的本地缓存版本。 删除浏览缓存后，一切都会按预期进行（即使在此之后更改CSS文件几次）。