为什么我的手机需要@media 的最大宽度这么大？答案

【问题标题】：Why do my phones require @media's max-width so large?为什么我的手机需要@media 的最大宽度这么大？
【发布时间】：2021-06-04 11:34:53
【问题描述】：

我有一个简单的脚本：

<style>
@media only screen and (max-width: 600px) {
body { background-color: red; }
}
</style>
<body>test</body>

这在我的电脑上运行良好。但是，在我的手机（两部）上，无论使用哪种浏览器，它都不起作用。只有当我将max-width 更改为 980px 时，它才会变为红色。显然我的手机没有那么大。我尝试添加这个ruler，虽然它的长度在 PC 上是固定的（就像一把好的尺子应该是这样），但在我的手机上它却缩小了。

你知道这是为什么吗？

【问题讨论】：

标签： css media-queries viewport

【解决方案1】：

确保您在 head 标签内设置了视口元标签。移动设备通常会使用虚拟视口来显示网站。元标记告诉浏览器应该如何在移动设备上显示网站。

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

width=device-width 告诉浏览器应该将虚拟视口设置为设备的宽度，and initial-scale=1 设置默认缩放级别。

【讨论】：

视口和虚拟视口有什么区别？
虚拟视口用于允许在移动设备上进行缩放，同时使非移动优化网站更易于在移动设备上使用。
普通缩放有什么不同？
网络实际上使用了 2 个不同的视口，一个布局视口和一个视觉视口。您可以在MDN 上阅读更多相关信息
感谢您的链接。它包含我需要的信息：“移动浏览器在虚拟窗口或视口中渲染页面，通常为 980 像素，通常比屏幕宽，然后将渲染结果缩小，以便一次全部看到。”跨度>