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

Question

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

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

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

为什么？

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

标签： cssmedia-queries

Answer 1

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

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