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

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

我们能够并实际进行响应式设计的事实意味着，我们几乎不再担心“平均”尺寸的浏览器是什么。尽管如此，拥有这些数据仍然很有趣。

早在 2011 年，为了收集最初的数据，我编写了一些 JavaScript 代码来测量屏幕尺寸和浏览器窗口尺寸，并将两者都保存到数据库中作为一条记录。我们发现，不到 1% 的人拥有与显示器尺寸完全相同的浏览器窗口。但这有点不公平，因为它没有考虑浏览器 UI 等因素，因此在允许了大量的填充（200 像素）后，我们发现 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%

长尾代表了更多用户。