最大宽度不适用于移动设备

Question

我正在尝试使用@media. 我正在通过 chrome 开发工具对其进行测试，并且仅当在 chrome 上测试移动设备时，移动屏幕尺寸才不起作用，方法是单击f12（在 chrome 中打开开发工具）然后点击ctr+ Shift+ M 。

当您调整大小时，@media (max-width: 480px)永远不会被切换。我做错了什么，我该如何解决？

代码笔

/* Width is less than x*/

@media (max-width: 480px) {
  body {
    background-color: blue;
  }
}
/* Width is greater than x*/

@media (min-width: 480px) {
  body {
    background-color: green;
  }
}
/* Width is greater than x*/

@media (min-width: 1024px) {
  body {
    background-color: orange;
  }
}

Answer 1

您是否在 index.html 中包含了元视口标签？

<meta name="viewport" content="width=device-width">