Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一

摘要：然后使用状态栏样式标签来根据您的应用程序需要更改状态栏的外观。这是我在项目上添加的代码实际体验如下图所示可以看到用户添加到主屏幕后，有了自定义的图标及启动图，打开后也不会有的地址栏和工具栏，体验跟原生一样。

现在很多开发者的Web应用程序的设计样式和交互类似本机应用程序，例如，它的缩放比例适合iOS上的整个屏幕。当用户将其添加到主屏幕时，您可以通过使其看起来像本机应用程序一样，在iOS上为您的Web应用程序定制Safari。您可以使用其他平台忽略的iOS设置来执行此操作。

例如，您可以为添加到iOS主屏幕时用于表示Web应用程序的图标指定图标，如指定Web Clip的网页图标所述。当您的Web应用程序从主屏幕启动时，您还可以最小化iOS用户界面上的Safari，如更改状态栏外观和隐藏Safari用户界面组件（搜索栏及工具栏）。这些都是可选设置，添加到您的网页内容时会被其他平台忽略。

阅读Web应用程序的“视口设置”，了解如何在iOS上设置Web应用程序的视口。

您可能希望用户能够将您的Web应用程序或网页链接添加到ios设备主屏幕。这些由图标表示的链接称为Web剪辑。遵循这些简单的步骤来指定一个图标来表示您的iOS应用程序或网页。

要为整个网站（网站上的每个页面）指定一个图标，请将一个图标文件以PNG格式放置在名为root的文档文件夹 apple-touch-icon.png
要为单个网页指定一个图标或者将网站图标替换为网页特定的图标，请向该网页添加一个链接元素，如下所示：

在上面的例子中，custom_icon.png用你的图标文件名替换。
要为不同的设备分辨率指定多个图标（例如，同时支持iPhone和iPad设备），请sizes按以下方式为每个链接元素添加一个属性：

使用最适合设备的图标。有关当前图标大小和建议，请参阅iOS人机界面指南的“图形”一章。
如果没有与设备的建议尺寸相匹配的图标，则会使用大于推荐尺寸的最小图标。如果没有大于推荐尺寸的图标，则使用最大的图标。

如果没有使用链接元素指定图标，则会在网站根目录中搜索带有apple-touch-icon...前缀的图标。例如，如果设备的适当图标大小为58 x 58，系统将按以下顺序搜索文件名：

apple-touch-icon-80x80.png

apple-touch-icon.png

注意： iOS 7上的Safari不会为图标添加效果。老版本的Safari不会为使用-precomposed.png后缀命名的图标文件添加效果。有关详细信息，请参阅第一步：在iTunes Connect中识别您的应用程序。

指定启动屏幕图像

在iOS上，与原生应用程序类似，您可以指定在Web应用程序启动时显示的启动屏幕图像。当您的Web应用程序处于脱机状态时，这非常有用。默认情况下，使用上次启动时的Web应用程序屏幕截图。要设置另一个启动图像，请在网页中添加一个链接元素，如下所示：

在上面的例子中，launch.png用你的启动屏幕文件名替换。有关当前的启动屏幕大小和建议，请参阅iOS人机界面指南的“图形”一章。

在iOS上，您可以为启动图标指定一个Web应用程序标题。默认情况下，使用