Cacher is the code snippet organizer for pro developers

var vars = {};

api = {
    viewport: function() {
        var e = window, a = 'inner';
        if (!('innerWidth' in window )) {
            a = 'client';
            e = document.documentElement || document.body;
        }
        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
    }
};

vars.screenWidth = api.viewport().width;
vars.screenHeight = api.viewport().height;

var p = document.createElement('p');
p.setAttribute('id', 'screenSize');
p.style.backgroundColor = 'rgba(0,0,0,0.8)';
p.style.color = 'white';
p.style.left = '0';
p.style.top = '0';
p.style.position = 'fixed';
p.style.padding = '10px';
p.style.zIndex = '99999';

var info = 'browser width: ' + vars.screenWidth + 'browser height: ' + vars.screenHeight;
document.body.insertBefore(p, document.body.firstChild);
info = 'browser width: ' + vars.screenWidth + '<br />browser height: ' + vars.screenHeight;
document.getElementById('screenSize').innerHTML = info;

window.onresize = function(event){
    vars.screenWidth = api.viewport().width;
    vars.screenHeight = api.viewport().height;
    info = 'browser width: ' + vars.screenWidth + '<br />browser height: ' + vars.screenHeight;
    document.getElementById('screenSize').innerHTML = info;
};