前言AWebApponiOS（下图中的“年”）和NativeApp（原生应用）从外观上看基本一样，但是他们使用的技术是HTML，CSS，Javascript，而不是原生应用程序使用的Objective-C。本文简要介绍如何在iOS上将网站转换为WebApp。这里，假设您的网站是响应式设计（responsivedesign）或者已经适配移动端。viewport我们将viewport添加到HTML（假设用户已经知道viewport） meta标签：其中width=device-width表示手机浏览器显示的宽度等于设备的物理宽度，initial-scale=1.0表示初始缩放因子为1.0（即不缩放),maximum-scale=1.0表示最大缩放因子为1.0，user-scalable=no表示用户不能手动缩放。请根据自己的情况调整这些参数。本站调整完成后效果如下：图标当用户通过safari访问我们的网站时，用户可以将网站的网址以快捷方式添加到首页，显示形式为与原来的应用程序一样，所以我们要在我们的网站上添加一个应用程序图标。iOS使用的图标为png格式，提供apple-touch-icon和apple-touch-icon-precomposed两种图标，使用方法如下：以上只能选其一，两者的区别二是如果你使用apple-touch-icon，那么iOS会给图标添加一些NB的效果，包括圆角、阴影、反光等。如果你使用apple-touch-icon-precomposed，iOS不会添加这个效果。如果你的网站也可以在Ipad上访问，那你就得为不同的设备准备不同大小的图标了。您可以通过sizes属性指定图标的大小：如果你不指定size属性的话，默认是57x57。我们可以看到ipad要求的图标尺寸是72x72，retina屏的iphone要求的尺寸是114x114，retina屏的ipad要求的尺寸是144x144。如果没有当前设备要求尺寸的图标，iOS将使用所有大于设备要求尺寸的图标中最小的图标。如果没有大于设备要求尺寸的图标，则使用最好的图标。如果有多个符合条件的图标，iOS将选择带有预组合关键字的图标。如果HTML中没有指定图标，iOS会在WEB的根目录下搜索对应的图标。假设设备需要一个57x57的图标，iOS将按以下顺序访问它：apple-touch-icon-57x57-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-precomposed.pngapple-touch-icon.png#p#启动界面就像一个原生应用，你也可以在WebApp中添加一个启动界面，很简单：在iPhone和iPodtouch上，尺寸必须为320x460。隐藏Safari用户栏为了更像本机应用程序，我们还可以隐藏Safari用户栏和地址栏。这称为独立模式。添加以下元以进入此模式：您可以使用window.navigator.standalone检测当前是否处于独立模式。效果如下：链接问题在Safari中，如果你点击一个链接，Safari会打开一个新的标签页，显然作为一个应用程序，这种体验简直太糟糕了，你需要在HTML中添加以下JavaScript来防止这种行为:以上代码来自gist。***玩得开心 ：）参考：配置Web应用关于触摸图标你一直想知道的一切原文章链接：http://weizhifeng.net/make-web-app-more-native.html
