Skip to content

Instantly share code, notes, and snippets.

@born2frag
Created December 12, 2013 09:45
Show Gist options
  • Save born2frag/7925531 to your computer and use it in GitHub Desktop.
Save born2frag/7925531 to your computer and use it in GitHub Desktop.
Show screen size (browser) - chrome snippet
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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment