When coding for the front end of a website, I frequently resize my browser window to simulate different screen resolutions. The most common size right now is 1024 X 768 pixels, width by height. This of course is not the actual size of the inner browser window, as the borders, head, status bar and other stuff must be taken into account. These elements fill up more space, so the true dimensions of the inner portion are different.

You can calculate the real dimensions of the inner window portion using a scripting language like javascript. This post won’t discuss this idea, but instead uses this idea to justify its purpose.

Here, we’re going to set up some bookmarks in Safari that will cause the browser window to be resized. This is very useful when developing the front-end for websites that need to be examined and debugged on different resolutions.

Setting up a bookmark is Safari is quite simple, really.

1. Make the bookmark

   You’ll first have to make a new bookmark. To do this, you’ll have to bookmark an actual site. Try google.com or anything else.

2. Edit the bookmark

   Go into the bookmarks menu and edit the new bookmark. Instead of http://example.com or what have you, type this directly in:

   javascript:window.size(1024,768)
   

   Save it and open a new tab or window.

3. Try it out

   Now go and try it out. It should resize your browser window to whatever dimensions you’ve specified in the call to window.size(). Cool!

I keep a few of these hanging around, including the following. Since I use a 24″ (1920 x 1200), my typical browser window size is never at one of these common aspect ratios, so using these is a quick way to be sure I’m working at a common resolution.

• 800 x 600
• 1024 x 768
• 1200 x 980