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