css - 为什么媒体查询不适用于移动设备？

Question

正如您从屏幕上看到的，我确实有一个媒体查询 CSS

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

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

为什么？

详细代码在这里:https://codepen.io/dotku/pen/VwZGKYV

Answer 1

@Reza 的评论有效，即添加视口(viewport)元。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">