So you are building a responsive design, checking it with your browser, your tablet and phone, everything looks great, then someone shows you the site on their device and elements look jacked up. This happened to me recently with the nav bar specifically on a client site. I had it looking gorgeous on all my devices, and all the clients devices, then saw it on a Galaxy S3, and the nav bar was wrapping the buttons to a second line, leaving one ugly orphaned button, CRAP.
So, a quick search for web based device emulators turned up a kick ass find: The Responsinator
It's a simple premise, enter the url of your site, and see how it looks on MULTIPLE devices on a single page.
Devices include:
- iPhone 3+4 portrait 320 x 480
- iPhone 3+4 landscape 480 x 320
- iPhone 5 portrait 320 x 568
- iPhone 5 landscape 568 x 320
- Crappy Android portrait 240 x 320 (love this description)
- Crappy Android landscape 320 x 240
- Android (Samsung Galaxy) portrait 380 by 685 (equivalent desktop resolution)
- Android (Samsung Galaxy) landscape 685 by 380 (equivalent desktop resolution)
- iPad portrait 768 x 1024
- iPad landscape 1024 x 768
- Kindle portrait 600 x 1024
- Kindle landscape 1024 x 600
Are they missing some devices? Sure, but they've got the most utilized devices, so it's extremely useful.
I am now using The Responsinator for developing all my responsive themes, maybe it will help you too!
If you have any favorite device emulators, or techniques to share please leave it in the comments.

