Google Analytics Can Show You Screen Resolution ≠ Browser Window

Google Analytics Can Show You Screen Resolution ≠ Browser Window It was five years ago when I wrote

Google Analytics Can Show You Screen Resolution ≠ Browser Window

It was five years ago when I wrote Screen Resolution ≠ Browser Window. The idea was that, at the time, there was a lot of talk about monitor size in relation to how we design websites. JavaScript is happy to tell the dimensions of a monitor: screen.width. But how useful is that? Isn’t it more useful to know how big the actual browser window is? Of course, it is. We don’t write media queries based on screen.width, we write them based on the browser window width, e.g. @media (min-width: 400px) {}. (And perchance, someday, element/container queries.)

The fact that we can and do practice responsive design means that we have all but stopped worrying about what an “average” size browser is that is visiting our site is. Still, it’s interesting data to have.

Back in 2011, to gather that original data, I wrote some JavaScript to measure both the screen size and the browser window size and save them both to a database as one record. We found that less than 1% of people had a browser window that was exactly as big as their monitor. But that’s a little unfair as it doesn’t account for browser UI and such, so with generous padding allowed (200px), we found that 61% of sessions has a browser window that was pretty close to their monitor size.

That’s still 39% of sessions where the browser window is smaller, though, which is interesting.

Original visualization of the variety of browser window sizes (green) laid over variety of screen sizes (red).

The data is easier to get today

Assuming you’re using Google Analytics, anyway. Back then, this data wasn’t available in Google Analytics, now it is, only you have to build a custom report to get it. Thanks to Charlie Livingston for bringing this up and showing it to me.

Make a Custom Report with Browser Size

Add a Secondary dimension: Screen Resolution

Now you can look at both numbers together:

I get 25,927 unique combinations of Browser Size and Screen Resolution

For css-tricks.com, that is. And even if I look at the very tail end, it rounds all the numbers to the nearest-10, meaning there are probably an order of magnitude more variations if these numbers were tracked down to the pixel.

Most combinations represent some tiny fraction of the whole. For example, a screen resolution of 1600×900 with a browser size of 1580×810 represent 0.12% of users. And there are thousands of more combinations like it.

There are a few at the very top:

Browser Size Screen Resolution Users
1350×660 1366×768 5.31%
1900×950 1920×1080 4.14%
1900×970 1920×1080 3.58%
1350×640 1366×768 3.52%

The long tail represents far more users.


Google Analytics Can Show You Screen Resolution ≠ Browser Window is a post from CSS-Tricks

Source: Google Analytics Can Show You Screen Resolution ≠ Browser Window

Pin It

Leave a Comment