例子：创建TIME时间WEB应用到桌面
第1步 ：Web应用程序时间JS
这是最好的构建Web应用程序，然后转移到iPad的Web应用程序配置。
应用程序本身，在这种情况下，是一个简单的页面告诉时间。 因此，应用程序被命名为“Time”。它使用jQuery来实现最终的结果。我用jQuery的时钟插件，在短短的几行jQuery的。
<script
type=”text/javascript”>
$(document).ready(function()
{
$(‘#jclock’).jclock();
});
</script>
第2步：设置应用程序的名称
这也许是所有步骤中最简单的。所有这一切都需要的是您的Web应用程序的名称更改名称标签。
<!– Page Title –>
<title>Time</title>
第三步：设置应用程序图标
下一步是设置应用程序图标。这是57px 57px图标的iPhone主屏幕上显示。(ipad为114*114)
有两个选项来设置这个图标。首先是使用的图标，添加圆角。要做到这一点，我们使用这个元标记：
<link rel=”apple-touch-icon-precomposed”
href=”img/icon.png”/>
第二个选择标准的苹果光泽给人的图标：
<link rel=”apple-touch-icon”
href=”img/icon.png”/>
我选择预先组成的图标，最后的结果如下：
第4步：设置启动画面（App加载图片,相当于经常使用的loading部分）
当您的Web应用程序加载，你可以选择有一个闪屏显示。 这个形象应该是320px * 460px(ipad为1024*768)。 为了对此进行设置，使用此Meta标签在您的文件头 。
<link
rel=”apple-touch-startup-image” href=”img/splash.png” />
下图为启动画面的效果：
第5步：使应用程序全屏
下一步是要删除默认的苹果工具栏和菜单栏。这些都显示在上面的网址，搜索和显示的书签，并转发在底部的按钮。
这是通过以下元标记：
<meta
name=”apple-mobile-web-app-capable” content=”yes” />
第6步：设置状态栏样式
您还可以设置状态栏的样式。这是在屏幕显示信息，如信号强度，电池和Wi – Fi信号强度的顶部栏。 对于这项工作，应用程序必须在第5步设置为全屏。对于这个元标记中，有三个选项。
1.首先是正常的灰色渐变：
<meta
name=”apple-mobile-web-app-status-bar-style”
content=”default” />
2.第二个是一个坚实的的回状态栏，这主要是最佳的选择：
<meta
name=”apple-mobile-web-app-status-bar-style” content=”black”
/>
3.最后是一个透明的状态栏，允许用户通过状态栏看到：
<meta
name=”apple-mobile-web-app-status-bar-style”
content=”black-translucent” />
Our final status bar:我们的最终状态栏：
第7步：设置手机浏览缩放控制
这个元标记告诉设备显示页面的宽度，最小和最大缩放值，初始缩放值，以及用户是否有能力放大和缩小。
如果您的网站是小于980px（网页上显示的默认宽度），然后宽度应设置这个标记。 此外，如果应用程序是iPhone的具体，然后在宽度应设置的iPhone，iPad或iPod Touch的宽度。 人们还应该牢记，而不是使用屏幕的宽度和高度的实际价值，应使用“设备宽度”和“设备的高度 ”的值。 这里有一些例子，标签：
<meta name=”viewport” content
= “width = device-width, initial-scale = 2.3, user-scalable = no”
/>
<meta name=”viewport” content
= “width = device-width, initial-scale = 2.3, minimum-scale = 1,
maximum-scale = 5″ />
下面是所有可用的选项：
width – Width of viewport in pixels. 宽度 -视口的宽度，以像素。
[Default: 980, Range: 200 - 10,000] [默认值：980范围：200 -
10,000]
height – Height of viewport in pixels. 高度 -视口的高度，以像素。
[Default: calculated with the width and aspect ratio of the device, Range: 223
- 10,000] [默认：计算的宽度和长宽比的设备，范围：223 - 10000]
initial-scale – The initial scale of the viewport.
最初的规模 -视口的初始规模。 [Default: calculated to fit
the webpage in the area available, Range: calculated with minimum-scale and
maximum-scale properties.] [默认：计算面积，范围，以适应网页：
最小规模和最大规模的的物业计算]
minimum-scale – The minimum scale of viewport. 最小规模 -视口的最低规模。 [Default: 0.25, Range: >0 - 10] [默认：0.25，范围：0 - 10]
maximum-scale – The maximum scale of viewport. 最大规模的-视口的最大规模。 [Default: 1.6, Range: >0 - 10] [默认值：1.6，范围：0 - 10]
user-scalable – Whether the user can zoom in and
out. 用户可扩展性 -无论用户可以放大和缩小。 [Default: yes, Options:
yes or no] [默认：是的，选项：yes或no]
手机浏览缩放控制
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no”/>
其中：
iPhone满屏幕显示：width=device-width
width – viewport的宽度 [默认值：980范围：200 -
10,000]
height – viewport的高度 [默认：计算的宽度和长宽比的设备，范围：223 - 10000]
initial-scale – 初始的缩放比例 [默认：计算面积，范围，以适应网页：
最小规模和最大规模的的物业计算]
minimum-scale – 允许用户缩放到的最小比例 [默认：0.25，范围：0 - 10]
maximum-scale – 允许用户缩放到的最大比例 [默认值：1.6，范围：0 - 10]
user-scalable – 用户是否可以手动缩放 [默认：是的，选项：yes或no]
第8步 ：测试Web应用程序
我们现在设立的Web应用程序来完成，让我们将它添加到我们的设备。
浏览到您的网站上的应用程序的位置。
按屏幕底部的“+”号按钮。
按“‘Add to Home
Screen(添加到主屏幕)”。
按“Add(添加)”
结论
现在，您的应用程序的安装成功，您将能够启动它，然后从主屏幕看到启动画面。
===================================================================
附：IHAVEU.COM网站头代码
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html;
charset=utf-8″ http-equiv=”Content-Type”/>
<meta name=”viewport”
id=”viewport” content=”width=device-width, initial-scale=1,
minimum-scale=1, maximum-scale=1″/>
<meta
name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style”
content=”black” />
<link rel=”apple-touch-icon”
href=”/i4logo.png?201108211555″ />
<link
rel=”apple-touch-startup-image” class=”startup”
href=’/ipad_startup.jpg?201108211555′/>
<link rel=”shortcut icon”
href=”/favicon.ico?201108211555″>
===================================================================
附其它一些私有标签：
1.webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
(1)<meta
content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0″ name=”viewport” />
(2)<meta content=”yes”
name=”apple-mobile-web-app-capable” />
(3)<meta content=”black”
name=”apple-mobile-web-app-status-bar-style” />
(4)<meta
content=”telephone=no” name=”format-detection” />
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
2、如何去除Android平台中对邮箱地址的识别
看过iOS webapp
API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中
<meta content=”email=no” name=”format-detection”
/>
3、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
4、如何禁止用户旋转设备
我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！
至少Apple webapp
API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。
iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。
5、如何检测用户是通过主屏启动你的webapp
看过Apple webapp
API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone\ipod\ipod
touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，
我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。
在Android中从来没有添加到主屏这回事！
6、如何关闭iOS中键盘自动大写
我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
===================================================================
===================================================================
===================================================================