HomeHome   About ScottAbout Scott   FacebookFacebook   TwitterTwitter   Email NewsletterNewsletter   RSS FeedRSS Feed

Here’s a nifty little JavaScript trick snatched fresh from the “I wish I would have known about this years ago!” files. Did you know that you can create a perfectly-sized browser window, great for testing out web pages on alternate screen resolutions, on the fly?

You can by typing in this line in your browser’s address bar:

javascript:resizeTo(800,600)

Hit “enter”, and voila! Your window will instantly resize itself to the resolution that you determined (in the above example, 800 x 600 pixels).

You can take this one step further and create pre-determined buttons in your browser if you use Internet Explorer. Type in the same JavaScript line as above. Then, click on the IE page icon beside it in the address bar and drag it to your Links bar. (If you’re like me, you may have previously disabled the Links bar to increase the amount of on-screen real estate. Remember to re-enable it before trying the dragging trick.) You can make several of these buttons for a multitude of resolutions (1024 x 768, 1154 x 864, 1280 x 1024, 1600 x 1200, etc.), and you’ll find that they come in very handy when designing pages for various audiences.

If you use Firefox, you can install the Web Developer Toolbar that does resizing like this and a whole lot more, such as giving the current window size in pop-ups, thew window size in the browser title bar, options to resize the entire window or just the viewport, and the ability to size unlimited presets.

Making Pre-Determined Browser Window Sizes in JavaScript