【问题标题】:what's the difference between window size and viewport size窗口大小和视口大小有什么区别
【发布时间】:2018-10-23 15:00:48
【问题描述】:

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

但我仍然对窗口大小和视口大小之间的差异感到有些困惑, 窗口大小:

视口大小:

它们不是一回事吗?

【问题讨论】:

标签: html css user-interface web responsive


【解决方案1】:

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

【讨论】:

  • 所以视口和屏幕尺寸一样吗?视口是以 css 像素还是设备像素来衡量的?
【解决方案2】:

Kateryna S. 提到的另一种说法是,视口的呈现方式会根据您设备的大小而有所不同。例如,假设您使用材料设计制作了一个响应式 Web 应用程序,该应用程序通过网格系统在您的桌面浏览器和移动设备上看起来是一种方式。移动设备的视口要小得多,并将使用较小的网格呈现站点。

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

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

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

【讨论】:

  • 那么视口和屏幕尺寸一样吗?
猜你喜欢
  • 2012-07-31
  • 2012-05-28
  • 2013-04-13
  • 1970-01-01
  • 2017-11-08
  • 2012-10-22
  • 2016-06-18
  • 2016-02-16
  • 2017-07-24
相关资源
最近更新 更多