css - 谷歌浏览器模拟设备尺寸不触发 css 规则

Question

我正在处理媒体查询，以便使一个两到三页的小型网站适合移动设备。我想为宽度小于或等于 375px 的任何设备(例如 iPhone 6)提供自定义样式。这是我在我的 CSS 中的做法

@media only screen and (max-width: 375px)  {
  body {
    background-color: green;
  }
}

问题是，当我使用 Google Chrome 的设备模式模拟 iPhone 时，background-color: green 没有触发。此外，模拟手机的尺寸不是根据标尺调整的。这有点难以解释，所以我链接了一个 screenshot并指出对我来说没有意义的部分。知道我错过了什么吗？任何帮助表示赞赏。

我还应该提到，当我在模拟器之外调整屏幕大小时，媒体查询工作正常。

Answer 1

将此添加为元标记:

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

这会将视口(viewport)设置为设备的宽度。基本上，它告诉浏览器该网站应如何在移动设备上显示。