This page simulates the the resolution and pixel density of various mobile devices, using data from Wikipedia. It is intended for testing HTML/CSS designs on lots of different screens.

If you want the screens to appear at the right physical size on your screen, it is important that you enter the pixel density of the screen that you are viewing this page on to the left. The default value is 113 dots per inch, which (according to the Wikipedia page linked above) is the value for a 13 inch MacBook Pro.

The second text field on the left is where you enter the URL of the page you want to display on each of the simulated screens. The default is a test page that I'm working on, using CSS media queries and the CSS rem unit. Instead of setting that field, you can also clone the git repo and then try out your own layouts offline.

Each of the simulated screens is an <iframe> with its width and height set to the number of pixels on the device screen. To make the screen appear at its actual physical size, I use a CSS transform attribute to scale it down. (I'm using -moz-transform right now, so this is Firefox only at the moment.) If your page includes bitmapped images, this transformation step will down-sample them, so they might not appear crisp on these simulated screens.

Finally one major caveat: the pages loaded into the simulated screens do not know that they're going to be rescaled, and they think they've got the same pixel density as the rest of your web page. That means that CSS media queries using resolution, max-resolution and min-resolution will not work the way you want them too. (If you can think of a way to work around this, please let me know.)