解释未包含元视口标记时移动浏览器的行为

Question

我的div宽度设置为800px。当我在笔记本电脑上查看时，它会按预期显示。但是当我访问手机上的网页时（或者只是使用Chrome开发工具使用iPhone 6视图）我希望div超出屏幕宽度，因为iPhone 6的宽度只有375点（CSS像素）。

现在我知道在包含<meta name="viewport" content="width=device-width,initial-scale=1">之后它会按预期工作。确实如此。但我很想知道当元标记不存在时默认情况下移动浏览器会做什么。似乎它“看到”屏幕的宽度约为。 980px（即使它不是）并相应地扩展所有内容。因此，为了填充手机的整个宽度，我会使用width: 980px。但这个数字来自哪里？无法弄明白。

Answer 1

在元视口功能和“响应式设计”出现之前，您一定错过了早期的互联网。为了使网站适合您的屏幕，浏览器会尝试缩小并为您提供网站的鸟瞰图 - 有点像站在离桌面屏幕10英尺的位置。

然后，您可以放大和缩小以与网站的不同部分进行交互。不同的浏览器/设备以不同方式实现此缩放。有些人试图找到你网站最广泛的部分并缩小到足以包含它，其他人可能只是假设你的网站适合某个宽度并缩小以适应。

在当天，980是网站的事实标准宽度，因为它肯定适合大多数人的桌面显示器。因此，您的设备正在做出这样的假设：“这显然不是一个响应式网站，这意味着它可能是10年前制造的，假装屏幕宽度为980像素”。

Answer 2

如果未配置视口，则移动浏览器会显示完整的网站。意味着您将在375 px的iphone 6,6s和7中看到完整的800px布局。在这种情况下，设备像素比率不起作用。您需要缩放手机屏幕才能阅读文字。