Simple rig for testing CSS3 media queries in the browser.
Utilises an iFrame to represent the target device screen size and some simple controls to flip the orientation and switch between screen sizes.
| Name | Screen size | Notes |
|---|---|---|
| QVGA | 320x240 | (eg. Nokia 6700) |
| HVGA | 480x320 | (eg. iPhone 3G, 3GS) |
| iP5 | 568x320 | (eg. iPhone 5, 5S) |
| nHD | 640x360 | (eg. Nokia N8) |
| VGA | 640x480 | |
| WVGA | 800x480 | (eg. Nokia N900, Nexus One) |
| SVGA | 800x640 | |
| XGA | 1024x768 | (eg. iPad) |
Append a query url to have it load directly in the iFrame:
Append a further argument (from the list above) to specify the initial resolution:
- Fizzin' & Poppin' - click airborne bubbles to pop.
- Box reflect test - autoplay or manual control.
- Responsive Notes application - switch orientation for optimised experience.
- Responsive Contacts - switch the orientation and try the filters.
- Hicks Design - scales right down to QVGA.
- Bootstrap - popular framework for mobile first web projects.
- Golden Grid System - lightweight folding grid approach to responsive design.
The Unlicense: http://unlicense.org/ (aka: public domain)