When I take screen shots of web applications, I like to be able to control the aspect ratio, typically 3:2. It’s tough to judge pixel lengths by eye. So, I created a little utility called Browser Sizer that lets you control how big the window should be.

You can specify either the pixel dimensions or just a ratio. Another option lets you choose pixel dimensions from a list of popular mobile devices. You can still try to eyeball the best size, then grab settings from the current window.

The ratio option lets you enter your desired aspect ratio (or grab the current window’s ratio). To convert the ratio to width and height in pixels, you have three options: you can shrink or enlarge the current window size until it fits the desired ratio, or select “maximum” to have it fit the screen’s available space.

Measurements are done either for the document (the HTML display) or the window (the entire browser and all its toolbars).

You can optionally display a grid in the background.

The end result can take place in the current window or in a popup window. Your settings may disallow either or both of these options. Each browser has different ways of handling permissions for resizing and opening new windows.

If the “URL” field is given a web address, that page will be loaded after the window is resized.

Like Russell Heimlich’s Dynamic Dummy Image Generator, you can get immediate results by putting the parameters in the URL, such as sizer.html?w=620&h=465.

The program is written in JavaScript. One of the more interesting bits of code is used to derive the current window’s aspect ratio. I could of course have just grabbed the display’s width and height, but I wanted to find their greatest common divisor to express them using the smallest numbers possible. The Euclidean algorithm does the trick without too much computation:

function gcd(a, b) {  
  if (a == 0) return b;
  while (b != 0)
    if (a > b) a -= b;
    else b -= a;
  return a;

For example, since gcd(261, 174) is 87, the aspect ratio 261:174 is equivalent to 3:2 (dividing each by 87).

You may not always want to reduce the ratio to its lowest terms when you enter values in the program. The values calculated for the “shrink” and “enlarge” options are always multiples of the ratio you enter, so you can use that to control the increments. For example, even though 1:1 and 100:100 are equivalent, using the latter will force the options to have widths and heights always in multiples of 100.

The end result is a program that’s not just handy but hopefully also fun. See what you think of the Browser Sizer app.

Specifying an Exact Browser Size or Ratio

Leave a Reply