Ronald Roe

Display Viewport Size Bookmarklet

Chrome has a nice little overlay shows the viewport size when you resize if you have the developer tools open. For whatever reason, it stopped working on me for a short while. It was a bit frustrating, because of course it would decide not to work right when I needed it most.

So, why not recreate the magic?

Get the bookmarklet here

Original, uncompressed code below:

function vp_getViewport(){
  this.w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  this.h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  this.output = {
    w: this.w,
    h: this.h
  };

  return this.output;
}
function vp_init(){
  var e = document.createElement('div');
  e.classList.add('vp_vpElement');
  e.style.backgroundColor = '#aaa';
  e.style.border = '1px solid black';
  e.style.padding = '2px';
  e.style.fontSize = '12px';
  e.style.position = 'fixed';
  e.style.top = '10px';
  e.style.right = '10px';
  e.style.zIndex = '1000000';
  document.body.appendChild(e);
}
vp_init();
function vp_showSize(viewport){
  var e = document.querySelector('.vp_vpElement');
  e.innerHTML = viewport.w + ' x ' + viewport.h;
}
window.addEventListener('load', function(){vp_showSize(vp_getViewport());});
window.addEventListener('resize', function(){vp_showSize(vp_getViewport());});