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.
Image may be NSFW.Clik here to view.
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
Image may be NSFW.Clik here to view.
Add a Secondary dimension: Screen Resolution
Now you can look at both numbers together:
Image may be NSFW.Clik here to view.
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 1600x900 with a browser size of 1580x810 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 |
|---|---|---|
| 1350x660 | 1366x768 | 5.31% |
| 1900x950 | 1920x1080 | 4.14% |
| 1900x970 | 1920x1080 | 3.58% |
| 1350x640 | 1366x768 | 3.52% |
The long tail represents far more users.
Google Analytics Can Show You Screen Resolution ≠ Browser Window is a post from CSS-Tricks
