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.
<script>
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() ); });
</script>
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.
Please provide a rating, it takes seconds and helps us to keep this resource free for all to use
Lets look at an example for a 1024 px x 768px viewport device:
Now that you have the JavaScript script required to identify your screen size (or viewport size), lets put that to some practical use.