Screen Size Calculator for SEO | jQuery Script Example to get current Screen Size

This article provides a working example and code snippet for jQuery Screen size function which allows you to identify the screen size of a Browser on desktop, Tablet or Mobile. Understanding the screen size in real time allows web designers to see how modern web design templates wrap (change) to suit different device types. The supporting information explores how this is particularly useful for ensuring the design supports SEO from a bounce rate and exit perspective.

If you are serious about delivering a solid, cross browser experience for your users, you will spend time understanding and tweaking your design to get the most from your website traffic. In the modern era where devices come in a plethora of sizes, the importance of analysing your site metrics and understanding how integration differs on different browser sizes is key. Lets start by looking at the Screen Size and Browser size you are currently using:

If you want to add this table to your own website to test the layout at different pixel ratios, you can copy the jQuery code below onto your site and use it from there. If this is useful, please share a link to iCalculator on your website.

function ScreenSize(){
var vh = screen.height;
var vw = screen.width;
var bh = $(document).height();
var bw = $(document).width();
return " <table class=\"calculator\"> <caption>Screen Size Design Considerations</caption> <tr><th>Screen size (viewport) height currently being used</th><td>"+vh+"px</td></tr> <tr><th>Screen size (viewport) width currently being used</th><td>"+vw+"px</td></tr> <tr><th>Current browser window height</th><td>"+bh+"px</td></tr> <tr><th>Current browser window width</th><td>"+bw+"px</td></tr> <tr><th>Pixel amount of vertical screen below the fold not seen by user on load:</th><td>"+(bh - vh)+"px</td></tr> <tr><th>Percentage amount of vertical screen below the fold not seen by user on load:</th><td>"+Math.round( ((bh - vh)/vh)*100, 2 )+"%</td></tr> </table>";
$("#ScreenSize").html( ScreenSize() );
$(window).resize(function(){ $("#ScreenSize").html( ScreenSize() ); });

Once you have copied and pasted the code and have it working on your website, you can then start to test your website design based on the actual browser size. We use pixels as the means of measuring the screen size (you may with to use the pixels per inch calculator to understand how the sizes affect viewability).The easiest way to do this is to access your website using a desktop browser, hit the minimise button and then grab the edge of the browser to resize the window.

As you resize the window you will notice the pixel height and pixel width change. If you have a dynamic web design, you should also notice your website changing (depending on how CSS is loaded, for example the dynamic design on iCalculator load Mobile specific dynamic design so the flows are a little different. This is not common practice but it is a good practice which allows browser specific designs and code to be delivered where relevant, rather than loading all design scripts / code and bloating the site / wasting bandwidth / extending load times etc. which in turn drive up bounce rate, reduce user performance and overall, lose you visitors.

[ 3 Votes ]

Lets look at an example for a 1024 px x 768px viewport device:

Page Optimisation for Device Size

Now that you have the JavaScript script required to identify your screen size (or viewport size), lets put that to some practical use.

  1. Log in to your Google Analytics Account
  2. If you have more that one site, navigate to the the site you wish to review
  3. From the left hand panel in Google Analytics, click on Audience
  4. The Audience menu should open up for you, click on the Sub Category "Technology"
  5. The Technology menu should expand, click on "Browser & OS"
  6. Select a desired date range. When we review screen size specific bounce rate, we look at the past 3 months to provide a good sample period. You can of course choose a different sample period. We also compare stats to the previous year to see improvement over time but, again, this is optional.
  7. Once you have selected the date, change the "Primary Dimension" from Browser to "Screen Resolution". You will find the primary Dimension options listed vertically under the chart.
  8. You will then be presented with a list of the screen sizes (viewports) that your users commonly use to access your website. If this is the first time you have seen these stats, you will probably be blown away by the incredible amount of and variation in screen sizes. The chances are you will also be surprised by the most popular screen size of the users of your website.
  9. As with other Google Analytics reports, you can drill down into specific elements (so exact screen size reports). So, have a scroll through all those screen sizes, see which screen sizes have the highest bounce rate, then compare your website when it is viewed at that screen size using the screen size calculator.
  10. You can then start to tweak your site design by providing CSS designed / targeted at or specifically delivered to users with devices that have that screen size. This allows you to reduce bounce rates on a device by divide / viewport by viewport level.
  11. The net result being an overall decrease in Bounce rate meaning more visitor engagement, page views and website growth.
  12. Our final tip, when you make screen size specific web design changes, recorded them in the notes on Google Analytics. This makes it easier to benchmark success and understand how changes you make to your web design affect your SEO and user engagement.