技术问询：Window Size与Viewport Size的区别究竟是什么？

嘿，我来帮你把这俩概念掰扯清楚——它们真不是同一回事儿！我结合你给出的示意图给你拆解：

1. Window Size（窗口尺寸） #

你贴的第一张图对应的是整个浏览器窗口的大小，这里面包含了浏览器自带的所有UI元素：比如顶部的标签栏、地址栏，侧边的书签栏，底部的状态栏这些都算在内。简单说，就是你肉眼看到的浏览器整个外框的宽高，它是浏览器整体的尺寸，和网页内容本身的显示区域不是一回事。

举个例子：当你把浏览器窗口拉宽拉窄，或者切换成全屏模式，这个Window Size就会跟着变化——因为它是整个浏览器的“外壳”大小。

2. Viewport Size（视口尺寸） #

而第二张图的Viewport Size，指的是专门用来显示网页内容的区域大小——也就是把浏览器那些工具栏、标签栏都去掉之后，剩下的那块能渲染网页的地方。

在移动端里视口还会细分布局视口、视觉视口这些，但桌面端我们常说的视口，就是你打开网页后，能直接看到的内容区域（包括滚动条以内的范围）。比如刚才那个例子，假设浏览器窗口总宽度是1200px，标签栏+地址栏占了100px，那Window Size是1200px，Viewport Size就是1100px——这就是最直观的区别。

一句话总结 #

• Window Size：浏览器整个“外壳”的尺寸（含浏览器自身UI）
• Viewport Size：网页内容专属的显示区域尺寸（仅网页渲染区）

内容的提问来源于stack exchange，提问作者user9623401