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

Question

我有一个宽度设置为800px的div 。 当我在笔记本电脑上查看时，它会按预期显示。 但是当我在手机上访问网页时（或者只是使用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布局。在这种情况下，设备像素比率不起作用。 您需要缩放手机屏幕才能阅读文字。