Develop iPhone Web Apps w/out an iPhone

I saw my friend Aaron twitter a question about this topic, so I thought I’d pull together a quick post with some resources for those with a Mac (and 1-2 for Mac or Win Firefox) and general tips. Briefly the tips are:

Safari– Go to Preferences and check the box for Show Develop menu in menu bar.
thumbnail view of Safari Preferences
Then you can use the menu Develop > User Agent > Mobile Safari 1.1.3 – iPhone. That will allow Safari to present itself to website (and your code) as the iPhone web browser. Hovering over a menu option will also display the full User Agent string.
thumbnail view of Develop menu - User Agent - Mobile Safari

iPhoney- iPhoney from MarketCircle is basically a shell around WebKit that acts like the iPhone browser, Mobile Safari. It does support rotation, but isn’t exactly like iPhone (address bar can’t scroll (but can be hidden), it does add vertical/horizontal scroll bars in some cases were iPhone wouldn’t). That said, it is a nice way to get a quick “iPhone Preview” of any site from your laptop or desktop computer.

iPhoney in horizontal/landscape view

Tip: I found that I get more “iPhone-like” results with many sites by having iPhoney use a custom user-agent. The User Agent string below matches exactly what a web server sees for my iPhone user agent with the current firmware, whereas the iPhoney returns a slightly different version (Mobile/1A538a). Just use the appropriate menu item to enter the text below as “Custom User Agent”.

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Switch User Agent- Firefox users (even those already using Firefox 3.0) can use the User Agent Switcher extension to also mimic the iPhone web browser user agent, with the same User Agent string as above.

Firefox extensions for Javascript development- While you’re at it, you may also want to get a couple of other Firefox extension that are generally useful for web development– the Web Developer extension is from the same author as User Agent Switcher, and the latest Firebug extension beta release seems to work well with Firefox 3 (and help a lot with debugging). Firesizer isn’t is compatible with Firefox 3 (yet) now, and it allows you to quickly switch Firefox to different screen sizes… helping you preview an iPhone sized window of (or even test other web sites & apps at common sizes like 1024×768).

iUI- iUI is set of CSS, HTML and Javascript that hails from Joe Hewitt of Facebook, who also originated Firebug. iUI is available from the Google code site, and includes code to provide a more iPhone-like look and feel to your web applications while providing the ability to handle page orientation changes (rotation between landscape & portrait views).

Apple Developer pages and Google Groups- There are a bunch of resources on the Apple site and there is an active iPhone Web Development Google Group too. Visit the Apple Web Apps Development Center and Apple iPhone Dev Center. Then check out the Google Groups iPhoneWebDev.

iPhoneDevCamp- Finally, there will be a second iPhoneDevCamp at the Adobe offices in San Francisco. It is scheduled for August 1-3 2008, and you should watch the official iPhoneDevCamp 2 website for more information.

2 thoughts on “Develop iPhone Web Apps w/out an iPhone

  1. Really great post. Thanks a lot! I really love freesizer and I´ve waited long enough till it was compatible with FF3.

Comments are closed.