My new favorite screen ruler is called Pixus — it’s free, cross-platform, and easy and pleasant to use. Best of all, it has a number of useful presets for Web and mobile developers.
Grab the installer for your platform at Google Code. It uses Adobe Air, which is probably already installed on your system, but if it isn’t, you’ll need to install it first.
Once Adobe Air is installed, run the program and you’ll see two windows — the ruler itself, which appears as a transparent frame, and a floating preferences palette, which lets you switch between options quickly.
Resize the ruler frame by using the drag handles located along the right and bottom edges, as well as the bottom right corner. The top and left edges display rulers (in pixels), and the frame’s dimensions update in real time in the window’s title bar. You can drag the frame around with the mouse, but for fine control, switch to the keyboard: the arrow keys move the frame in 1 pixel increments; holding the shift key at the same time moves it 10 pixels at a time. You can also resize the frame with the arrow keys by simultaneously holding down the Ctrl key in Windows, or the Command key on a Mac.
The first tab in the Preferences window, labeled “Presets,” contains a list of common viewport dimensions: 320 x 480 (iPhone Portrait), 800 x 600, 1024 x 768, etc. Click the “New Preset” button to create your own.
The “Skins” tab is fun — it applies skins for various browser clients to the frame: iPhone, Firefox, IE8, etc.
There are many other options you can play with — some of which are described in the “Help” tab — so click around. The little square in the title bar, for example, goes to a light box, which darkens the entire screen except for the frame and its contents. This app doesn’t have some of the bells and whistles of other rulers — it works in pixels only, doesn’t measure angles, etc. — but it’s clearly targeted at Web developers instead of designers, and it’s lightweight and easy to use.