Test rig for mobile CSS3 media queries

Screen resolution: QVGA 320x240 (eg. Nokia 6700)
HVGA 480x320 (eg. iPhone 3G, 3GS)
nHD 640x360 (eg. Nokia N8)
VGA 640x480
WVGA 800x480 (eg. Nokia N900, Nexus One)
SVGA 800x640
XGA 1024x768 (eg. iPad)

Simple rig for testing mobile CSS3 media queries in the browser thus saving:

Resizing browser to activate the queries
Deploying code to multiple devices

It uses an iFrame to represent the target device screen size and some simple controls to flip the orientation and switch between screen sizes.

The source code is available on github. Grab it, place your application in the /apps directory and change the path in the placeContent method of /scripts/main.js to set it as the iFrame src.

Alternatively you can append a query url to have it load directly in the iFrame, eg. ...index.html?http://news.bbc.co.uk you can also append a further argument to specify the initial resolution, eg. ...index.html?http://news.bbc.co.uk?VGA

A good example to try here is colly.com which features a modular design that is well-suited to scaling to different device resolutions and also makes good use of CSS3 media queries.

Another excellent example is Hicks Design which has a really nice fluid layout that scales right down to QVGA.

Obviously applications being developed can be run directly in the browser as well. The test rig just allows easy verification of CSS across different device screen sizes and orientations.