我正在阅读A tale of two viewport，所以无法按照“后果”中的说明进行操作。他声称，当放大页面时，即使它的width：100％，右上角也不再是蓝色。
我不明白为什么会这样。实际上，我什至无法复制它：
有人可以在一个更简单的例子中向我解释作者的意思吗？
最佳答案
您可以使用“浏览器缩放”（而不是缩小缩放）来查看效果，即ctrl +/-。您需要水平滚动才能看到作者示例中的效果。
按下ctrl +几次时，您正在增加CSS像素的大小。这意味着更少的CSS像素将适合您的浏览器窗口（视口），因此放大可缩小视口。例如，假设您的视口最初为800px宽。您放大到200％。由于每个CSS像素现在是尺寸的两倍，因此您的视口只能容纳400像素。
文章的重点是，即使视口缩小了，页面上的内容也没有（以CSS像素为单位），但仍约为800像素（或作者指定的大小），因为只有像素大小发生了变化。这意味着依赖视口的尺寸现在看起来与其余内容不成比例。在他的示例中，顶部栏设置为填充视口宽度100％。当内容大于视口时，条形图将不会与内容延伸相同的宽度。
关于html - 关于两个视口(viewport)的故事-宽度:100％，但不全 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34563440/