html - 两个视口(viewport)的故事 - 宽度 :100% but not full width

Question

我正在阅读 A tale of two viewport我无法理解后果中的解释。他声称当一个人放大他的页面时，右上角不再是蓝色的，即使它的宽度是 100%。

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

谁能用一个更简单的例子向我解释作者的观点是什么？

Answer 1

您可以使用“浏览器缩放”(不是捏缩放)，即 ctrl+/- 来查看效果。需要水平滚动才能看到作者示例中的效果。

当您按几次 ctrl+ 时，您将增加 CSS 像素的大小。这意味着更少的 CSS 像素将适合您的浏览器窗口(视口(viewport))，因此放大会缩小您的视口(viewport)。例如，假设您的视口(viewport)最初是 800 像素宽。你放大到 200%。由于现在每个 CSS 像素的大小都是原来的两倍，因此您的视口(viewport)只能容纳 400 像素。

这篇文章的重点是，即使视口(viewport)缩小了，页面上的内容并没有(根据 CSS 像素)，它仍然是 ~800px(或者作者指定的任何内容)，因为只有 像素尺寸 已更改。这意味着依赖于视口(viewport)的尺寸现在看起来与其余内容不成比例。在他的示例中，顶部栏设置为 100% 填充视口(viewport)宽度。当内容变得比视口(viewport)大时，栏将不会扩展与内容相同的宽度。