随着手机硬件的高速发展，WebApp的优势越来越明显，开发周期短，效率高，让越来越多的开发者采用WebApp开发，但是WebApp在体验上，还是不及原生App，下面就介绍5种办法，让你的WebApp更像原生的App。 一、控制用户缩放 网页可以无限缩放，但是原生App是不会缩放的。想让WebApp更像原生App，你要做的一件事就是控制用户的缩放，代码如下：

<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

viewport的宽度为屏幕宽度，initial-scale是初始缩放值，maximum-scale=1.0是能缩放的最大值。如果不想让用户缩放，则可以将最小值和最大值设为一样，都为1.0。 更多ViewPort设置详情可参看iOS Developer Library。 二、隐藏浏览器的UI或工具栏 首先设置为全屏模式：

<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏地址栏：在App的顶部还有一个状态栏，你可以更进一步通过把状态栏设置成黑色来自定义app的外观，从而使你的app可以利用整个屏幕。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

三、解决fixed bug，使用导航条或工具拦 大部分手机浏览器不支持css的，fixed属性，这样在做导航条或工具栏的时候非常麻烦，我们通常希望导航条固定在顶部。解决fixed bug 代码如下：

 $(window).scroll(function(){  
 // 重点就是下面这一条语句的实现   
   $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });      

 }); 

四、自定义iPad或iPhone图标 用户可以简单地把Web页面的链接添加至iOS设备的主屏幕上，作为一个Web开发者，你会希望控制Web site或者Web App的icon在用户设备上的展现方式。你可以通过跟多元标签来实现，苹果称之为“Web Clips”。如果你要搜索更多在用户屏幕自定义Web App icon内容的话，你可以搜“web clips”。 你需要的只是一个特别的icon，可以在head区添加如下代码实现：

<link rel="apple-touch-icon" href="/custom_icon.png"/>

同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可用apple-touch-icon-precomposed代替apple-touch-icon。

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

系统默认的图标大小是57×57像素，不过一些设备有着不同的分辨率，你可以创建具有不同分辨率的icon：

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

最常用apple-touch-icon.png，但也可以包含尺寸大小信息以及是apple-touch-icon-precomposed还是apple-touch-icon(e.g. apple-touch-icon-57×57-precomposed.png)。 五、添加启动画面 IOS原生App是有启动画面的，而WebApp没有。因此，你需要在Web页面和WebApp上添加启动画面才能让它更像原生App，这个过程跟自定义icon差不多—需要通过 <link>添加适当标签。 与icon一样，不同规格尺寸的设备需要不同的启动画面，最常用最简单的方法使设置一个单独的图片:

<link rel="apple-touch-startup-image" href="/startup.png">

对iPhone和iPod touch而言, 图片是320×460像素，但是，如果你想使用分辨率更高的图片，下边方法可以实现：

<link rel="apple-touch-startup-image" href="/startup-748x1024.jpg"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<link rel="apple-touch-startup-image" href="/startup-768x1004.jpg"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />