窗口大小和视口大小之间的区别是什么

Question

我发现一篇好文章解释了视口的概念： https://www.quirksmode.org/mobile/viewports.html

但是我仍然对窗口大小和视口大小之间的差异感到困惑， 窗口大小：

视口大小：

他们不是一样的吗？

Answer 1

另一种说Kateryna S.提到的方法是视口呈现的方式取决于设备的大小。例如，假设您使用材料设计创建了一个响应式Web应用程序，该设计通过网格系统在您的桌面浏览器上以及移动设备上的一种方式。移动设备具有小得多的视口，并将使用较小的网格渲染网站。

例如，如果您查看材料设计并调整浏览器大小，您将看到它在不同视口中的外观。如果您将浏览器的大小调整到最小的尺寸，模仿您在移动设备上看到的内容。

https://material.io/design/components/cards.html#usage

该窗口只是您的浏览器视图，与其他设备无关。

Answer 2

视口是您在设备上可见的区域。窗口是您的浏览器窗口。窗口可以与视口一样大或更小。