Google Chrome 模拟设备大小未触发 css 规则
Google Chrome simulated device size not triggering css rules
我正在处理媒体查询，以便使一个两到三页的小型网站适合移动设备。我想为宽度小于或等于 375px（例如 iPhone 6）的任何设备提供自定义样式。这是我在 css
中的做法
@media only screen and (max-width: 375px) {
body {
background-color: green;
}
}
问题是，当我使用Google Chrome 的设备模式模拟iPhone 时，background-color: green 没有触发。此外，模拟 phone 的尺寸并未根据标尺调整大小。这有点难以解释，所以我链接了一个 screenshot 并指出了对我来说没有意义的部分。知道我错过了什么吗？任何帮助表示赞赏。
我还应该提到，当我在模拟器之外调整屏幕大小时，媒体查询工作正常。
将此添加为元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会将视口设置为设备的宽度。基本上，它告诉浏览器网站应该如何在移动设备上显示。
我正在处理媒体查询，以便使一个两到三页的小型网站适合移动设备。我想为宽度小于或等于 375px（例如 iPhone 6）的任何设备提供自定义样式。这是我在 css
中的做法@media only screen and (max-width: 375px) {
body {
background-color: green;
}
}
问题是，当我使用Google Chrome 的设备模式模拟iPhone 时，background-color: green 没有触发。此外，模拟 phone 的尺寸并未根据标尺调整大小。这有点难以解释，所以我链接了一个 screenshot 并指出了对我来说没有意义的部分。知道我错过了什么吗？任何帮助表示赞赏。
我还应该提到，当我在模拟器之外调整屏幕大小时，媒体查询工作正常。
将此添加为元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会将视口设置为设备的宽度。基本上，它告诉浏览器网站应该如何在移动设备上显示。