为什么我的手机需要@media 的最大宽度这么大？
Why do my phones require @media's max-width so large?
我有一个简单的脚本：
<style>
@media only screen and (max-width: 600px) {
body { background-color: red; }
}
</style>
<body>test</body>
这在我的电脑上运行良好。但是，在我的手机（两个）上，无论浏览器如何，它都不起作用。只有当我将 max-width 更改为 980px 时，它才会变为红色。显然我的手机没有那么大。我尝试添加这个 ruler，虽然它的长度在 PC 上是固定的（作为一个好的尺子应该是这样），但在我的手机上它缩小了。
你知道这是为什么吗？
确保您已在 head 标签内设置视口元标签。
移动设备通常会使用虚拟视口来显示网站。元标记告诉浏览器应该如何在移动设备上显示网站。
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 告诉浏览器它应该将虚拟视口设置为设备的宽度，and initial-scale=1 设置默认缩放级别。
我有一个简单的脚本：
<style>
@media only screen and (max-width: 600px) {
body { background-color: red; }
}
</style>
<body>test</body>
这在我的电脑上运行良好。但是，在我的手机（两个）上，无论浏览器如何，它都不起作用。只有当我将 max-width 更改为 980px 时，它才会变为红色。显然我的手机没有那么大。我尝试添加这个 ruler，虽然它的长度在 PC 上是固定的（作为一个好的尺子应该是这样），但在我的手机上它缩小了。
你知道这是为什么吗？
确保您已在 head 标签内设置视口元标签。 移动设备通常会使用虚拟视口来显示网站。元标记告诉浏览器应该如何在移动设备上显示网站。
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 告诉浏览器它应该将虚拟视口设置为设备的宽度，and initial-scale=1 设置默认缩放级别。