Iphone tester: http://iphonetester.com/

More emulators: http://www.webdesignerdepot.com/2012/11/6-free-mobile-device-emulators-for-testing-your-site/

Info about initial-scal

http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html

1. DO use the viewport meta tag
2. DO use media queries to render your page appropriately for various widths ranging from under 200px to 1024px or more
3. DO use width=device-width,initial-scale=1 in your viewport meta tag OR use width=device-width alone¹².
4. DO NOT use maximum-scale=1 or user-scalable=no
5. DO NOT use width=<specific width>
6. DO NOT use @media all and (*-device-width: xxx)

Here is detailed info on media queries: http://learn.shayhowe.com/advanced-html-css/responsive-web-design

For mobile web sites, it is better to use em widths in your media queries. The advantage is the site will be compatible with different base font sizes or different zooms.

However, when a user zooms in or out, the page layout doesn't adjust automatically, the user has to refresh the page.

More info: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

For media queries based on width to work on mobiles, you need to add the following meta tag to the html file:
<meta name="viewport" content="width=device-width">