We’ve released a little tool we built: Browser Dimensions. It looks downright sparse, but we’ll get to that in a second.

It’s probably worth noting that the tool is built for a very specific purpose: writing media queries. So the numbers it reports may not resemble the “real” numbers, or even those reported through JavaScript APIs. The JavaScript APIs don’t always report the same numbers as the CSS media queries, and since Apple’s Retina displays hit the market in 2010, developers have to cope with the reality that sometimes a pixel isn’t a pixel. Hardware moves quickly nowadays, and the most direct method to check what media queries apply to the environments you need to support is to ask the devices themselves.

For every web project we’ve done, there are a few device and browser combinations that we needed to support. So we’ve needed to construct appropriate media queries, and I hadn’t been able to find an appropriate tool when I wrote this.

It has a few nice points:

• It checks actual media queries, meaning that the numbers you see are the numbers that you can use in your CSS.
• It does its job very quickly.
• It fits on the screens of most mobile devices, meaning that if your media query doesn’t work on a device that a client/user/boss is using, you can point them at that URL and ask for a screenshot. (This is why it doesn’t waste space.)

If that sounds like something you could use, have a look at the the tool.