两个视口的故事 - 宽度：100％但不是全宽

Question

我正在阅读A tale of two viewport，我无法按照后果的说明进行操作。他声称，当一个人放大他的页面时，右上角不再是蓝色，即使它有宽度：100％。

我不明白为什么会这样。事实上，我甚至无法重现它：

有人可以用一个更简单的例子向我解释一下作者的观点是什么吗？

Answer 1

您可以使用＆＃34;浏览器缩放＆＃34;来查看效果。 （不是捏缩放），即ctrl +/-。您需要水平滚动才能在作者的示例中看到效果。

当你按住ctrl +几次时，你就会增加CSS像素的大小。这意味着较少的CSS像素将适合您的浏览器窗口（视口），因此放大会缩小视口。例如，假设您的视口最初为800px宽。您放大到200％。由于每个CSS像素的大小是现在的两倍，因此您的视口仅适合400px。

文章的观点是，即使视口缩小，页面上的内容也没有（就CSS像素而言），它仍然是~800px（或者作者指定的任何内容）因为只有像素大小已经改变了。这意味着依赖视口的大小现在看起来与其他内容不成比例。在他的示例中，顶部栏设置为填充视口宽度100％。当内容变得大于视口时，条形图将不会延伸与内容相同的宽度。