象大多数iPad粉丝和程序员一样,我有一个梦想，那就是如果不需要昂贵的Apple设备,不要繁琐的审批程序,不要为发布应用交钱就能开发iPad 应用程序该多好.现在这个梦想就要实现了,那就是网页应用程序.
那么,怎样才能让网页象看起来象本机程序一样呢?
你需要做这些工作:
全屏幕:(去掉浏览器的地址栏和按钮栏);
防止窗口滚动和缩放;
响应多点触摸和手势事件;
使用WebKit的CSS得到的iPhone OS的外观和感觉;
高速缓存的应用程序，因此它不上网运行;
在主屏幕上的一个自定义图标;
加一个启动画面。
如果你想更深入的了解这方面的知识，我给你推荐一本书:"Building iPhone Application with HTML，CSS and JavaScript"。
1.全屏幕
添加一个meta标签就可以去掉URL和按钮栏：
<meta name="apple-mobile-web-app-capable" content="yes" />
2.更改手机的状态栏
您还可以更改手机的状态栏显示，可以是白色，黑色或半透明：
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
为内容的值是默认情况下，黑色和黑色半透明。
3.防止结垢
如果你捏一个web应用程序，但它仍然可以在浏览器里面放大缩小,这是我们不希望看到的.如果你想防止结垢，使用viewport meta标签
<meta name="viewport" content="user-scalable=no, width=device-width" />
你几乎可以肯定将要设置设备宽度以及视区宽度，使应用程序显示在其自然分辨率。
4.防止弹性滚动
要防止弹性滚动 ，你可以捕捉在JavaScript的touchmove事件，并取消它们。您可以通过添加一个body
标签的处理程序，并调用事件对象的preventDefault方法：
<script> function BlockMove(event) { // Tell Safari not to move the window. event.preventDefault() ; } </script>
<body ontouchmove="BlockMove(event);" > ... </body>
5.创建主屏幕图标
要添加一个主屏幕图标，需要创建一个114x114的PNG文件，然后做一个<link>加入到<head>里面。
<link rel="apple-touch-icon" href="./apple-touch-icon.png" >
6.创建一个起始画面
要在加载过程中显示起始画面，需要创建一个320x460的PNG文件，加入到<head>里。
<link rel="apple-touch-startup-image" href="./startup.png"
该文件必须绝对320x460，否则iPhone就会忽略它。 （iPad的需要1004x768）。
7.缓存应用程序文件
如果您希望能够使用您的应用程序没有互联网，或者你想提高其负载时间，创建一个缓存清单文件，
从主文件的Web应用程序的链接：
<html manifest="cache.manifest">
确保您的Web服务器服务。manifest文件的MIME类型text /manifest，否则这将无法工作。如果你使用
Apache，在你的htaccess文件以下。
AddType text/cache-manifest.manifest
然后使用wget的-S的检查响应头的内容类型是正确的。
cache.manifest文件列出了哪些文件应该被缓存的，应该从网络检索：
CACHE MANIFEST
local1.file
local2.file
NETWORK:
network1.php
network2.cgi
8.检测触摸和手势的事件
触摸事件：
ontouchstart - 开始触摸。
ontouchmove - 触摸并移动。
ontouchend - 结束触摸。
手势事件：
ongesturestart - 手势开始-放缩或旋转开始。
ongesturechange - 手势改变(放缩或旋转)。
ongestureend - 规模或轮换结束。
如果你只是想使用在触摸的地方，点击，那么该事件对象的目标字段包含被移动的元素。
9.检测旋转事件
如果你想检测到旋转手机事件，请监听body标签的onorientationchange。目前的方向是在
window.orientation，和它编码的角度（度）的iPhone旋转 - 0，-90或90 - 离垂直直立。
10.模仿iPhone OS的组件
WebKit渲染引擎支持大量的CSS扩展，您可以使用这些模拟原生的控件，例如，按钮很容易：
.button {
font-family: Helvetica ;
font-weight: bold ;
padding: 15px;
border: 1px solid black ;
-moz-border-radius: 8px ;
-webkit-border-radius: 8px ;
margin-top: 10px ;
margin-bottom: 10px ;
background-color: white ;
}
好了,实现了上面的这些项目,你的网页就可以变得象本机应用程序一样了.现在开始试试吧?Good luck.