If you’re already building web apps, you might wonder why you should bother to build an iPhone native app. The short answer is that you might not need to, but you should still optimize the app for iPhones.
Native-looking chrome
Set these in the head:
```
// set a custom icon for when a user bookmarks the app to the home screen
// hide the browser chrome
//set the phone status bar style; can be grey, black, or black translucent
</td>
</tr>
</table>
</div>
Caveats:
* Only works for web pages that have been saved to the home screen and opened from there.
* Portrait mode only.
* Any link will open in new browser tab. Use ajax to keep application to single page, see dashcode templates for examples.
Query this state via js:
<div class="wp_syntax">
<table>
<tr>
<td class="code">
```
window.navigator.standalone
</td>
</tr>
Detect orientation:
```
<h3 id="13148_touchable_1" >
Touchable
</h3>
<p>
Touch Events<br />
They’re different from mouse events, so we’ve gotta code differently for them. The sequence works like this:<br />
touchstart -> touchmove -> touchend (or, if a user hits home button touchcancel)
</p>
<div class="wp_syntax">
<table>
<tr>
<td class="code">
```
<div ongtouchstart="function();" >
```</td></tr></table>
</div>
<p>
What you get when from that:
</p>
<div class="wp_syntax">
<table>
<tr>
<td class="code">
```
event.touches //all
event.targetTouches //this one
event.changedTouches //um...
</td>
</tr>
Touch events track every finger on the screen. Gestures are a higher-level interface to that data.
```
</div>
<p>
Scale and rotation properties of that gesture are available. I’m not sure if other gestures, such as page flicking, are handled as gestures or touches.
</p>
<h3 id="13148_visually-sophisticat_1" >
Visually sophisticated
</h3>
<p>
Apple decided that HTML was seriously deficient in the areas of object transformations, transitions, and keyframe animations.
</p>
<p>
Why render multiple rotated and resized versions of the images you use throughout your app/web page? Loading a single large version of the image may perform better than having to load multiple versions of the image at various sizes, rotations, or skews.
</p>
<p>
Here are a few options (<a href="http://maisonbisson.com/post/12472/css-transformations-in-safari-webkit/">see previous</a>):
</p>
<div class="wp_syntax">
<table>
<tr>
<td class="code">
```
.transformed {
-webkit-transform: rotate(20deg);
-webkit-transform-origin: top left;
}
</td>
</tr>
And it can animate transitions between these styles. Specify the transition duration if you like.