编写Iphone Web App的三个主要技术是HTML, CSS, Javascript，不需要在Iphone上安装，也不要用Objective-C来写，所以对于前端来说算是比较容易上手。相对于Native App来说，Web App的优点是开发周期比较快而且可以运行在任何Web浏览器中并且开发不只是在Mac OS上，缺点是你不可以访问Iphone的一些硬件特性而且很难实现一些高级的UI效果。
有一些需要注意的地方整理了一下：
1.准备一个Iphone的样式表
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only screen and (max-width: 480px)” />
2.控制页面的缩放，如果不指定的话Iphone会认为你的网页宽度为950px
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
3.添加Home页图标，如果用户要添加你的Web App到Home页的快捷方式的话，需要指定一个ICON，有两种
<link rel=”apple-touch-icon” href=”myCustomIcon.png” />
<link rel=”apple-touch-icon-precomposed” href=”myCustomIcon.png” />
4.全屏模式
<meta name=”apple-mobile-web-app-capable” content=”yes” />
5.状态栏
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
6.自定义启动图片，这个png图片的尺寸是320px X 460px
<link rel=”apple-touch-startup-image” href=”myCustomStartupGraphic.png” />
7.使用JQTouch来实现动画
JQTouch是一个基于Jquery的手机Web开发的插件，下载地址：http://jqtouch.com/
8.使用HTML5来实现客户端数据存储
HTML5提供了LocalStorage, SessionStorage和客户端数据库
9.使用HTML5来实现离线应用
离线应用需要在服务器端存放一个manifest文件，然后<html manifest=”demo.manifest”>，如果你在使用Apache或其它的Web服务器，需要添加一个.htaccess文件到你的网站目录，里面的内容为：AddType text/cache-manifest .manifest
manifest的文件格式如下：
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
NETWORK:———–>FALLBACK:
logo.jpg ————>logo.jpg offline.jpg
NETWORK表示的是在线文件白名单，如果你离线的话，这个图片不会显示，如果想让其它图片替换这个图片的话，可以改成箭头所示。
10.使用PhoneGap让你的Web App变成Native App
PhoneGap是一个连接Web应用程序和手机设备桥梁的开源开发工具。
了解更多请阅读“Building iPhone Apps with HTML, CSS, and JavaScript”这本书以及云谦的“iPhone 上的Web前端开发”。
一个视频的项目中用到了Media Player播放器，改了一下对方给的代码，发现里面的JS好像都是停留在2005年以前，索性自己重新写了一个。点此DEMO。
主要是通过JS来模拟播放器的时间，并且控制播放器的暂停、音量、播放位置，目前网上的Media Player的API不是很多，也是参考了对方之前的代码，其中有一个playState属性很重要，它的各个状态码代表了播放器的各个状态，所以在播放器加广告的操作都是通过这个来进行了。
网上看到的Mediaplayer属性和方法
属性/方法名：说明：
[基本属性]
URL:String; 指定媒体位置，本机或网络地址
uiMode:String; 播放器界面模式，可为Full, Mini, None, Invisible
playState:integer; 播放状态，1=停止，2=暂停，3=播放，6=正在缓冲，9=正在连接，10=准备就绪
enableContextMenu:Boolean; 启用/禁用右键菜单
fullScreen:boolean; 是否全屏显示
[controls] wmp.controls //播放器基本控制
controls.play; 播放
controls.pause; 暂停
controls.stop; 停止
controls.currentPosition:double; 当前进度
controls.currentPositionString:string; 当前进度，字符串格式。如“00:23”
controls.fastForward; 快进
controls.fastReverse; 快退
controls.next; 下一曲
controls.previous; 上一曲
[settings] wmp.settings //播放器基本设置
settings.volume:integer; 音量，0-100
settings.autoStart:Boolean; 是否自动播放
settings.mute:Boolean; 是否静音
settings.playCount:integer; 播放次数
[currentMedia] wmp.currentMedia //当前媒体属性
currentMedia.duration:double; 媒体总长度
currentMedia.durationString:string; 媒体总长度，字符串格式。如“03:24”
currentMedia.getItemInfo(const string); 获取当前媒体信息”Title”=媒体标题，”Author”=艺术家，”Copyright”=版权信息，”Description”=媒体内容描述，”Duration”=持续时间（秒），”FileSize”=文件大小，”FileType”=文件类型，”sourceURL”=原始地址
currentMedia.setItemInfo(const string); 通过属性名设置媒体信息
currentMedia.name:string; 同 currentMedia.getItemInfo(”Title”)
[currentPlaylist] wmp.currentPlaylist //当前播放列表属性
currentPlaylist.count:integer; 当前播放列表所包含媒体数
currentPlaylist.Item[integer]; 获取或设置指定项目媒体信息，其子属性同wmp.currentMedia
还遇到一个播放器进度条拖拽的问题，要兼容各个浏览器，通过原生的JS来做，主要是监听鼠标的三个事件onmousedown/onmousemove/onmouseup，这里有一篇文章“How to Drag and Drop in JavaScript”介绍的比较详细。
最近常用一个尚译的翻译widget，右键点击下面的“译”图片，选择右键菜单中的“将此链接加为书签”或“添加到收藏夹”;火狐或Chrome浏览器可以直接将此按钮拖到浏览器书签栏，添加成功后就可以运行这个widget了。
看一些它的书签URL: javascript:void((function(){if(window.Como&&window.Como.someyi){Como.someyi.open()}else{var%20a=document.createElement(’script’);a.setAttribute(’type’,'text/javascript’);var%20b=document.charset?document.charset:document.characterSet;var%20c=b.toLowerCase()==’gb2312′?’pack-gb2312.js’:'pack-utf8.js’;a.setAttribute(’src’,'http://yi.comsome.com/’+c);document.getElementsByTagName(’head’).item(0).appendChild(a);Text.prototype.tagName=’#text’}})())
格式化一下：
javascript: void((function () {
if (window.Como && window.Como.someyi) {
Como.someyi.open()
} else {
var a = document.createElement(’script’);
a.setAttribute(’type’, ‘text/javascript’);
var b = document.charset ? document.charset : document.characterSet;
var c = b.toLowerCase() == ‘gb2312′ ? ‘pack-gb2312.js’ : ‘pack-utf8.js’;
a.setAttribute(’src’, ‘http://yi.comsome.com/’ + c);
document.getElementsByTagName(’head’).item(0).appendChild(a);
Text.prototype.tagName = ‘#text’
}
})())
这个书签URL的作用是get尚译的js脚本，看一下这个脚本‘pack-utf8.js’，这个是压缩后的代码，格式化看了一下，生成了一个对象Window.Como，所有的对象都是在这个命名空间下，因为widget不依赖任何类库，所以脚本自己封装了一些对于Array/Funtion/Event/Object对象的方法，主要的对外的功能对象是Window.Como.somyi这个对象，其它的都是为这个对象而服务的，而翻译的功能是Google Translate的API来做的。