Update: Decided to build this out a bit more, so the demo below no longer reflects the original code. Be sure to check out the full Web App Tester Tool.

So, feeling a bit silly today after asking if there were any good iPhone simulators for the iPad last night. As I do more mobile web app development, it’s becoming more of a necessity to own the devices I want to test on. If I had a simulator for smaller devices on a tablet though, I’d be all set. The frugal spender inside of me likes that idea.

After discussing some ideas with Jason Gullickson, I realized that I had completely forgotten about iframes, and how they work well with media queries. Oops.

A few short lines of code later, I have a working simulator for 320x480px devices that changes from landscape to portrait mode automatically. It’s super basic right now, and I’d like to add some customization features (additional device sizes, URL entry, device back button), but this is a good starting point for testing. When running on a tablet, it should do an ok job of mimicking a handheld touch device like the iPhone.

It works for really simple testing on a desktop as well, sans-touch.

Download Web App Tester: Web App Tester (49KB, .zip)

Try Web App Tester (Hint: Resize your browser viewport to get portrait/landscape mode.)

Currently, the demo above will just load up jQuery mobile’s documentation in the browser. If you download the system, you can plug anything in the iframe src. I’d like to build out this system a bit more, and offer an online toolkit for testing sites on a variety of devices eventually. I’ll post an update when that’s available. Until then, you’re welcome to use/modify/whatever any of the code in the download above.

One last thing! I built this for Webkit browsers, so it will have problems running in IE, Mozilla, etc as it is.