My Viewport Sizes

Yes, that is my two monitor set-up — one display at 1,920 × 1,080 (with a browser at whatever size will fit my tabs) and one at 1,024 × 1,280 (with a browser always at 1,024 × 1,024). My browser reports two different screen resolutions depending which display the browser is using.

During the last rebuild of my site at least two years ago I started to track the viewport sizes of my visitors via Google Analytics. Since I don't care much about screen resolution (screen size), I don't bother to track it.

Yesterday I saw a post that tracks screen sizes between technical and not-so-technical visitors to the author's site. While the information is interesting, it doesn't include any viewport data, which happens to be what I care about.

This motivated me to jump into my Google Analytics and pull the viewport data that I have. The chart below represents what I found:

What I've done is grabbed the last 500 visits to my site for which I have data (even bad data) and plotted them in a scatter chart without regard to the frequency of a particular resolution. To be clear, this isn't scrubbed data and it's not from a site targeted at the general web user.

The block of code I use to get this data into Google Analytics does the job. I borrowed the code from the post Measuring browser viewport size with Google Analytics, though I make my viewport(); call at the end of the page, not in the body.

function viewport() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
  } else if( document.documentElement &&
 ( document.documentElement.clientWidth
 || document.documentElement.clientHeight ) ) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
  } else if( document.body &&
 ( document.body.clientWidth
 || document.body.clientHeight ) ) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
  }
  _gaq.push(['_trackEvent',
   'Viewport',
   'Size',
   myWidth+'x'+myHeight]);
  _gaq.push(['_trackEvent',
   'Viewport',
   'Width',
   myWidth+'x'+myHeight,
   myWidth]);
  _gaq.push(['_trackEvent',
   'Viewport',
   'Height',
   myWidth+'x'+myHeight,
   myHeight]);
}

Hopefully that's enough to get your started on tracking viewport stats for visitors to your site. If you see ways I can improve it, then please do let me know. I can update this and we can all benefit.

If you are curious why I chose to skip tracking screen size and just focus on viewport size, I refer you to an article I wrote 13 years ago, along with more recent articles from me and others.

• Real-World Browser Size Stats, Part I, July 4, 2000.


• Real-World Browser Size Stats, Part II, July 4, 2000.


• Browser viewport statistics, November 10, 2009.


• Screen Resolution ≠ Browser Window, June 17, 2011.


• Browser screen resolution stats rile devs, April 13, 2012.


• Where's the Viewport Size Data? April 13, 2012.

Update: February 15, 2013

Welcome, visitors from the below tweet. Please post your own comments or even your own stats. I would love to see them.

What if we stopped measuring screen resolution and started measuring browser viewports instead? - bit.ly/149AFpk / cc: @ppk

— Smashing Magazine (@smashingmag) February 14, 2013

Update: November 13, 2013

To quote PPK, screen.width is useless. Devices don't consistently report device pixels or viewports in a consistent way. There is clearly still value in having some numbers, though the quality of those numbers is always suspect.