Web application on an iPhone - styling it to look like native iPhone app [closed]

Question

I saw some web pages display diffrently on an iPod Touch (and iPhone) - they pretty much looked like the native iPhone apps.

Think this can be done with styles and, optionally, rendering diffrent HTML on the server side, based on the user agent from request.

So, how do I get this effect? And, also, is there any emulator of iPhone OS browser, so I could test my application before really launching it, to see if it even displays?

Answer 1

I'm currently working with the iUI dev team on the current CSS style for the project and I have to say I'm quite impressed by the power of the little browser. Most webkit functions are available to the end user including -webkit-gradients so that you can get most of the UI elements out of the way with zero images. While you can render the page differently based on the User-Agent string, I recommend stearing away from that as of this this as you can target the iPhone with a stylesheet parameter.

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

This allows you to use the same HTML markup, and change the way it looks for your iPhone.

For iPhone OS Emulators, Apple has you covered, over on the Windows Side it is Safari, and don't forget to change the useragent to iPhone in the dev options. I however use Chrome as it also uses the webkit engine, so most CSS is syntactically the same.

However, most people have an iTouch or iPhone if your doing this kind of dev work. Your best bet is to test on the 2G phone as it has the highest level of restriction (and slowest of all of CPUs). This gives you a worse case scerario that if you find acceptable, will only get better for the people with 3G and 3GSes.

Some great resources on the subject include:

Apple's Webapps Page

Apple's Developer Safari Page - Includes Link to iPhone Simulator (MAC ONLY).

ADC: Safari Reference Library

ADC SRL: Getting Started with Web Apps

ADC SRL: Getting Started with iPhone Web Apps

Archived: iPhone Human Interface Guidelines for Web Applications - Metrics, Layout Guidelines, and Tips

Answer 2

See here for info on Joe Hewitt's CSS and JavaScript for native-looking iPhone web apps: http://ajaxian.com/archives/iphone-native-looking-skin

To simulate the look and feel of a web page on iPhone, you can try this: http://www.testiphone.com/. (But of course, if you are serious about this, use a real iPhone or iPod Touch.)