OK, here’s a hint I think a lot of you Windows switchers are going to love, and I’m sure more than a few long time Mac users will appreciate as well. I love Safari. I think it’s the best web browser out there. My primary Mac is a MacBook Pro that I use in a dual monitor setup at home, connected to a 24″ widescreen monitor, and on it’s own when at work or on the road. I use Safari all the time, no matter where I’m at, and one thing that can be annoying is having to manually move/resize my Safari window whenever I switch between single and dual monitor set up. Since Safari is always running, this is something I have to deal with at least twice a day.
For the longest time I got around this by using an AppleScript, which I placed inside my ~/Library/Scripts/Applications/Safari/ folder (where “~” represents my home folder). Then whenever I’d switch monitor setups, I’d simply run that script from within Safari via the AppleScript menu on the top right side of the menubar. The AppleScript menu can be enabled using AppleScript Utility located in the /Applications/AppleScript/ folder. For those interested, this is the script I used:
tell application "Safari"
set the properties of front window to {bounds:{1, 23, 1200, 1194}}
end tellYou can copy and past that code into Script Editor and save as a script with an appropriate name like “Set Window Size – External Display”. Just substitute your own values inside the curly brackets. The values correspond with x,y screen coordinates measured in pixels from the top-left edge of the screen, and indicate the location of the top left and bottom right corners of the window. In this case, my script told Safari to set the top left corner of the front window to 1 pixel from the left and 23 pixels down (to accomodate the menu bar), and the bottom right corner to 1200 pixels from the left and 1194 pixels down.
This script has worked well for me for several years, but it wasn’t quite as convenient as I would have liked since it required me to navigate and click on the Script menu, then click on the script I wanted to run. Being the lazy computer user I am, I’ve longed for a solution that would take one less click and would be even easier to activate. Then one day, I came across a useful hint in the ehmac.com forums about this simple javascript that you could save as a bookmark that would make Safari’s window full-screen:
javascript:self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);This was in response to a Windows switcher who really missed a simple way to make his browser window go full screen like Windows does when you click the maximize window. Thought it was pretty handy, so I added it to my Safari Bookmarks bar and called it “Full Screen” and left it there untouched for several weeks. Turns out I never want my Safari window to fill my screen since my displays are all fairly large and wide.
I guess today I had an epiphany. Lightning had just struck my brain (that had to hurt)*. If a Javascript can set my window full-size, then it should be able to set the window to any arbitrary size. Looking at the full screen javascript, it was ridiculously obvious how to modify it to fit my needs. Simply substitute the desired width and height in the resizeTo section like so:
javascript:self.moveTo(0,0);self.resizeTo(1200,1170);You could even specify a custom window position by changing the x,y coordinates in the moveTo section if you wish.
This in itself is quite brilliant, but still a bit inelegant having bookmarks named “Full Screen” and “Big Monitor” taking up all that space on your Bookmark bar. So I came up with some nice simple bookmark names that visually represented what I wanted to accomplish in a way that would look a bit like an icon, and take a minimal amount of space on my bookmark bar, as seen in the image to the right. So from left to right, I have |-| to resize the Safari window for my small display, |+| to resize the window for my large display and |‹ ›| to resize the window full screen.
This is how they appear in my Bookmarks window:
(Click to enlarge)
Just to clarify, the “|” character is achieved by pressing shift+\, and the ‹ › characters are created by pressing shift+option+3 and shift+option+4 separated by a space on a Mac. These symbols are smaller than the standard less than and greater than symbols “< >” and make for a nicer looking icon in my opinion. I was also trying to make all three “icons” appear as similar in size as possible for consistency sake and to strengthen the illusion that they are icons. What you name your bookmarks doesn’t make any difference to how they work, so be creative if my choices don’t fit your likes or needs. If you think you’ve improved on my names, let me know in the comments!
Having one-click access to these controls directly within the window is not only more convenient, but also more intuitive. It may not seem like a huge improvement over my previous AppleScript solution, but when you do the same operation multiple times a day, every day of your life, all those clicks really add up. Sometimes, it’s the little things that make all the difference.
Madgunde,
You’re brilliant; I have had both the Javascript and AppleScript tricks in place for years; but never though about the simple version you created.
Cheers Mate!
@BlackMacX
Thanks. Although one negative point to using the javascript solution is that Safari seems to ignore the window size you set for subsequent new windows that get opened, whereas the AppleScript solution’s window size/position are preserved when opening new windows. So until I find a solution to that small annoyance, I’ll be using both solutions.
Madgunde, I just was playing around with the keyboard and found that once defined, you can invoke your new “one” click Safari settings by using Command/Apple key + 1/2/3 (1. for the first command in the sequence; 2 and 3 for the following ones); this only works for entries in your Bookmarks Bar though; but it’s handy to know.
BlackMacX
@BlackMacX
Hey, cool tip, thanks! Another interesting thing is that the Command+1-3 shortcuts ignore folders in your Bookmarks bar and only activate the first three standalone bookmarks. So even though I have my 3 window bookmarks at the end of a list of folders, they still work!
Very cool. Now if only Safari remembered the window positions when using the bookmark method to resize/position.
HEY!! omg thank thank you thank you soooo much i’ve been tryin to figure this damn thing out for so long…thank you
Thanks, this is great! I still have a small issue with it on my Macbook, though: when trying to fill the screen, the window is still positioned 4 pixels in from the left edge of the screen. Can’t get it to budge unless I pick it up and drag it over.
Even if I specify a window size of 1280×800, I still get 1276×800, fitted to the right edge but not the left. Any ideas?
@Roland
That’s strange. I don’t have that problem and I have no idea what may be causing that for you. The “moveTo(0,0)” specifies that the window should be pinned to the very top left edge of the screen. Maybe play around with negative values like moveTo(-4,0)?
I like to pin my browser to the top right. So I tried:
javascript:self.moveTo(760,0);self.resizeTo(680,800);
If the window is big, I found that I had to click the javascript twice. It resized on the first, and moved on the second click. It seems that it will not move the window beyond the right screen margin on the ‘move’ command, then it resizes. Not a problem for (0,0)! I flipped it and it worked fine:
javascript:self.resizeTo(680,800);self.moveTo(760,0);
I have the same problem as Roland — four pixels off the left — and it drives me crazy. It used to work as it should, I believe until the move to Safari 3. (Don’t hold me to that, but I’m 95% positive that’s when it happened.) Using a -4 value doesn’t work.
This is awesome. Now what can we do about our dashboard, and other windows, like mail, ical, and the rest.
Wonderful tip. This, with the new features of Safari 4 are a beautiful combination for developing.
Thank you.
Gotta admin, you struck gold with this one. So simple and easy it hurts.
Great tip. And for Mike who asked what can we do with sizing the windows on our other applications. QuickKeys 4 for Mac lets you resize and position the windows of ANY applicaition with macros.
Cool tip. Really useful for preparing Safari for taking screen grabs.
[...] artofgeek.com – Set Safari’s window size with one click of the mouse [...]
Very cool. running a 23 inch monitor, I want right and left browsers – this works for firefox as well.
Brilliant. Well done.
Great tips people. Here is my contribution.
Resize Window and Position in Center of Screen
This script will first resize the window and then position the browser window in the center of your monitor.
javascript:self.resizeTo(1200,874);self.moveTo((screen.availWidth/2)-(window.innerWidth/2),screen.availHeight/2);
Be sure to call “self.resizeTo” first, followed by the call “moveTo”.
/* this resizes the width and hight of the window*/
self.resizeTo(1200,874);
/* this positions the window in the center of your monitor by */
/* getting the available screen width and dividing it in half */
/* then subtract the window’s width which has been divided in half */
self.moveTo((screen.availWidth/2)-(window.innerWidth/2),0)
===============
Position Browser Window in Center of Screen
javascript:self.moveTo((screen.availWidth/2)-(window.innerWidth/2),0);
Also, I just discovered that these scripts will not work with browser windows that have more than multiple tab windows loaded. They only seem to work in a single browser window with no other tabs loaded.
Does anyone have any workarounds for this?
Thank you very much for this amazing tip! I hate accidently moving my safari window out of position and having to fiddle around to get it even along the edges.
Yeah I just discovered it only works if you only have one tab open. Anybody know how to get it to work if you have multiple tabs open (which I always do).
THAT is very cool! For web development, I like to see the layout on different sized screens (e.g. 1024 x 768) but not have to move to a different computer. Firefox has a few tools that do this, but couldn’t (easily) find one for Safari. This works great! Plus, it also works in Firefox, except FF doesn’t move the window when it resizes. Who cares, right?
So, now I can resize screen to 320 x 480 to see what the site looks like on iPhone (using Safari Develop->User Agent tool). Thanks!!!
Thanks for this post (a real life saver). This is a valuable technique I miss in Safari (available in the Developer Toolbar for Firefox). I worked out a mod to set the actual viewport size as opposed to the Safari window size, because I do a lot of screen capture work and want to record the browsing area without status and toolbars, et al:
javascript:self.resizeTo(1280+top.window.outerWidth-top.window.innerWidth,720+top.window.outerHeight-top.window.innerHeight);
What I’ve done is just add a folder named “Resize” in the bookmarks bar and under that collected all the sizes I switch between.
Hope this helps.
Like Krista I wanted to test what iPhone looks like. Following on from Andrew’s suggestion the correct bookmark is:
javascript:self.resizeTo(380+top.window.outerWidth-top.window.innerWidth,480+top.window.outerHeight-top.window.innerHeight);
Works on Windows version of Safari, but as Charles & Daniel say, only works with a window with one tab open…
This is sooooo useful! Thanks for sharing
Thanks but I think you can just use resizeMyBrowser, it’s much easier and it support set the browser window size by both Inner and Outer size, works great on Safari, Firefox and IE.
http://resizeMyBrowser.com