While casually debugging some CSS3 media queries earlier, it struck me how useful it would be to have a simple bookmarklet, which you could click to display the viewport (window) size of any page you’re on and would update the X/Y size when you shrink/expand the browser. So I wrote one.
Drag this bookmarklet to your bookmarks bar (or whatever you call it) and click it, then play around with shrinking my site to see what happens at which screen sizes:
Window Size « all the code is in here! (click and drag it to your bookmarks)
It weighs in at just under 0.6kb, though it loads jQuery (if not already loaded), which I suppose is a cop-out, but heck, it took 15 minutes, and I spent 5 of that JSHinting it and writing this.
Use it on any site you’re working on to see the viewport size in the top left. It’s great for checking out your (or some other developer’s) media-query skillz, as you can easily see what happens at any specific viewport width. If it’s not immediately obvious why this would be useful, comment up below and I’ll post some relevant material or clarifications…
It should work on just about any website, though I’ve only tested it in Chrome, Safari and Firefox. Please test it loads, hack it, improve it and send it back for version 0.3!
PS. the code is on Github. Have a nice day!
PPS. Forgot to mention, one limitation is that if you zoom in/out in the browser, it messes with the window’s height and width, so it’s best to run this bookmarklet at default zoom level.