It turns out that this is a bad idea.
I recommend that a web application targeted for the iPhone be thought of as a web application, not an iPhone app. Extensive use of CSS can make an iPhone web app very pretty, but do avoid fixed elements. You can use elements that look similar to iPhone controls, but the design of a good web application has clear differences from the design of a native application.
What you can do with iPhone’s Mobile Safari is pretty cool. To make sure that Mobile Safari displays the web pages without zooming, the following meta tag works. It defines the page’s width at 320 pixels and prevents it from being scaled to any scale other than 100%.
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
The ability to support landscape and portrait modes is a very nice feature. For CSS specific to portrait mode, use
and for landscape mode use
Web applications targeted for the iPhone really can be very versatile. Look up CSS examples and tutorials for iPhone web applications to find what all Mobile Safari is capable of. Just don’t try to make it look like an iPhone app.