Google Analytics 可以显示屏幕分辨率≠浏览器窗口

五年前，我写了 屏幕分辨率≠浏览器窗口。当时，人们谈论了很多关于显示器尺寸与我们设计网站之间的关系。JavaScript 很乐意告诉您显示器的尺寸：screen.width。但这有什么用呢？难道了解实际浏览器窗口的大小不是更有用吗？当然，更有用。我们不会根据 screen.width 编写媒体查询，我们会根据浏览器窗口宽度编写媒体查询，例如 @media (min-width: 400px) {}。（并且可能有一天，元素/容器查询。）

我们能够并且正在实践响应式设计的事实意味着，我们几乎停止了担心“平均”浏览器大小是什么。不过，拥有这些数据仍然很有趣。

早在 2011 年，为了收集最初的数据，我编写了一些 JavaScript 来测量屏幕尺寸和浏览器窗口大小，并将它们都作为一条记录保存到数据库中。我们发现，不到 1% 的人拥有大小与显示器完全相同的浏览器窗口。但这有点不公平，因为它没有考虑到浏览器 UI 等因素，因此，在允许了宽松的填充（200px）的情况下，我们发现 61% 的会话拥有大小与显示器非常接近的浏览器窗口。

不过，这仍然有 39% 的会话的浏览器窗口更小，这很有趣。

如今，获取数据更容易

假设您正在使用 Google Analytics。当时，Google Analytics 中没有提供这些数据，现在可以提供了，只不过您需要构建自定义报表才能获得它。感谢 Charlie Livingston 提出了这个问题并向我展示了它。

创建包含浏览器大小的自定义报表

添加辅助维度：屏幕分辨率

现在，您可以一起查看这两个数字。

我得到了 25,927 种浏览器大小和屏幕分辨率的独特组合。

这是针对 css-tricks.com 而言的。即使我查看最末端，它也会将所有数字四舍五入到最接近的 10，这意味着如果这些数字被跟踪到像素级，可能还会存在数量级更多的变化。

大多数组合只代表一小部分用户。例如，屏幕分辨率为 1600×900，浏览器大小为 1580×810 的组合代表 0.12% 的用户。并且还有数千种类似的组合。

最顶端有一些组合。

浏览器大小	屏幕分辨率	用户
1350×660	1366×768	5.31%
1900×950	1920×1080	4.14%
1900×970	1920×1080	3.58%
1350×640	1366×768	3.52%

长尾代表了更多用户。