Snap to Desired Browser Dimensions

Web Development

It’s often desirable to quickly resize the browser to a given set of dimensions:  800×600, 1024×768, or maybe, “Hey, how would this look on a widescreen laptop?” (1280×800).  Granted, HTML design shouldn’t be too dependent on browser dimensions — after all, we live in a world of cell phone, PDA, and PSP browsers — and even on “normal” computer screens, many browsers are skinnable, so who knows how much area the viewport actually gets?  Regardless, it is darned convenient to be able to snap the browser quickly to whatever size you like, even if you’re only doing it to make tutorial screenshots.  The following three approaches are my favorite. 

Bookmarklets

The people at bookmarklets.com figured out long ago that browser bookmarks (or Favorites, in IE) are capable of storing more than just URLs.  They can also store JavaScript, and that’ll certainly do the trick.

Just bookmark whatever page you’re on (even this one — it doesn’t matter, because you’re going to edit the URL portion), then use your browser’s preference settings to change the URL to the following JavaScript:

javascript:resizeTo(800,600)

Rename the bookmark’s name to something like “Resize to 800×600” and you’re good to go.  This technique uses the javascript: protocol to tell the browser, “Okay, Bub, get ready for some script,” and then it invokes the native JavaScript function resizeTo(), which takes two parameters.

Do this as often as you like for different dimensions.  Works just fine in Firefox, IE, and Netscape, and probably others.

Browser Extensions

Both Firefox and IE support extensions that provide all kinds of useful developer tools, including browser sizing.  When I say “all kinds,” I really mean it.  If you haven’t done so already, you may want to check these out.  Each extension lets you toggle various CSS and JavaScript features, view the current page’s document object model (DOM), show/hide images, edit cookies, outline HTML elements, and more.

Firefox
https://addons.mozilla.org/firefox/60/

Internet Explorer
http://tinyurl.com/7mnyh

WiSi Window Sizer

This one resizes any window, not just the browser.  It’s one of those tiny freeware apps that does what it says, no more, no less.  The site is in German, but it’s a snap to navigate in any language.

http://www.fantastic-bits.de

Click the image to enter, click Freeware, click Desktop.  Download and enjoy.  :)   When the app launches, it immediately minimizes to the System Tray, so take care not to miss it.

Leave a Reply