This script overlays a fixed-ratio, semi-transparent div on screen and changes colors once your browser viewport is a given ratio.

find-window-ratio.js

/*

Find Window Ratio
By Don Denton
[email protected]

For example, a 16:9 ratio:

1. Copy/paste this whole thing into your console and hit enter/return.
2. Then use the command `findWindowRatio(16,9)` to find a viewport size
   that is close to, or exactly, a 16:9 ratio.
3. Start resizing your browser.
   An overlay that starts as red will fill the screen and then will turn
   blue when you are "really close" (vague, I know) and will turn green 
   if you are perfectly at the ratio you asked for.
4. Click on the overlay to dismiss it. Start resizing again to bring it back.

Personally, I have this saved as a TextExpander snippet that also adds the
`findWindowRatio(16,9)` command to the end.

*/

var findWindowRatio = function (width, height) {
  var overlay = document.createElement('div');
  var desiredRatio = height/width;
  var currentRatio = function(){ return window.innerHeight/window.innerWidth; };
  var setSize = function (width, height) {
    overlay.style.height = height + 'px';
    overlay.style.width = width + 'px';
  };
  var limitingDimension = function(){
    return (currentRatio() < desiredRatio) ? 'height' : 'width';
  };
  var fitOverlay = function(){
    var wH = window.innerHeight;
    var wW = window.innerWidth;
    if (limitingDimension() === 'height'){
      setSize( wH / desiredRatio , wH );
    } else {
      setSize( wW, wW * desiredRatio );
    }
  };
  var changeState = function (state) {
    if (state === 'close') {
      overlay.style.backgroundColor = "rgba(0,0,255,0.1)";
      overlay.style.borderColor = "#22f";
    } else if (state === 'perfect') {
      overlay.style.backgroundColor = "rgba(0,255,0,0.1)";
      overlay.style.borderColor = "#2f2";
    } else if (state === 'far') {
      overlay.style.backgroundColor = "rgba(255,0,0,0.1)";
      overlay.style.borderColor = "#f22";
    }
  };
  var ratioIsClose = function (){
    if ( Math.abs(currentRatio() - desiredRatio) < 0.001) {
      return true;
    }
    return false;
  };
  var checkState = function () {
    if (currentRatio() === desiredRatio) {
      changeState('perfect');
    } else if ( ratioIsClose() ) {
      changeState('close');
    } else {
      changeState('far');
    }
  };
  var hide = function(){
    overlay.style.display = 'none';
  };
  var show = function(){
    overlay.style.display = 'block';
  };
  overlay.id = 'the-overlay-for-ratio-finder';
  overlay.style.height = height + 'px';
  overlay.style.width = width + 'px';
  overlay.style.backgroundColor = "rgba(255,0,0,0.1)";
  overlay.style.position = 'absolute';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.boxSizing = 'border-box';
  overlay.style.border = "3px solid #f22";
  overlay.style.zIndex = 1000000000000000;

  overlay.addEventListener('click', hide);

  document.body.appendChild(overlay);
  checkState();
  window.addEventListener('resize', function(a){
    show();
    fitOverlay();
    checkState();
  });
};