ScreenRes Tool by Jamie Johnson

Jamie Johnson

February 8, 2017

If you don't want an add-on or extension to measure your screen and you just want it to tell you, you can use my ScreenRes Tool, which is running on this page. Notice both the tab title for this page and the display in the upper right hand corner. Resize the screen and notice how they change. This information will help with fine-tuning CSS for RWD rules in your responsive development.

Here's a look at the script:

/* ScreenRes Tool - Screen Resolution Utility Script by James "Jamie" Johnson @JamesArthurJohn */
var originaltitle;
function showres(){ 
    document.title = window.innerWidth + "px X " + window.innerHeight + "px - " + originaltitle;
    $('#screenres').html(window.innerWidth + "px X " + window.innerHeight + "px");
	setTimeout("showres()",100);
}   
$(document).ready(function(){
	ScreenRes = '<div id="screenres" style="position:fixed;top:10px;right:10px;padding:10px;background:#f1f1f1;color:blue;border:1px solid blue;border-radius:10px;z-index:99999;font-family:courier;">&#160;</div>';
	$('body').html(ScreenRes + $('body').html());
    originaltitle = document.title;
    showres();
});

And here's where to get it: http://tech.beacondeacon.com/screenres.js. Note that one may want to exclude use of the ScreenRes variable and the $('body') line in the code above and instead just use the tab title (or one could put the value of the ScreenRes variable as an actual element on the page instead of the script doing so for you).

Simple. Sweet. Useful.

Back to top