配置Web应用程序（转）

 

Web应用程序旨在以与本机应用程序相似的方式进行查看和执行，例如，它可以缩放以适应iOS上的整个屏幕。您可以在iOS上进一步为iOS上的Safari定制Web应用程序，当用户将其添加到主屏幕时，可以使其显示为本机应用程序。您可以使用其他平台忽略的iOS设置来执行此操作。

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

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

指定Web剪贴簿的页面图标

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

• 要指定整个网站的图标（网站上的每个页面），请将PNG格式的图标文件放在名为 apple-touch-icon.png

• 要指定单个网页的图标或将网站图标替换为网页特定图标，请将链接元素添加到网页，如：

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

  在上面的例子中，替换custom_icon.png为你的图标文件名。

• 要为不同的设备分辨率指定多个图标，例如，支持iPhone和iPad设备，请sizes按如下方式为每个链接元素添加一个属性：

  <link rel =“apple-touch-icon”href =“touch-icon-iphone.png”>

  <link rel =“apple-touch-icon”sizes =“152x152”href =“touch-icon-ipad.png”>

  <link rel =“apple-touch-icon”sizes =“180x180”href =“touch-icon-iphone-retina.png”>

  <link rel =“apple-touch-icon”sizes =“167x167”href =“touch-icon-ipad-retina.png”>

  使用最适合设备尺寸的图标。有关当前图标大小和建议，请参阅“ iOS人机界面指南 ”的“图形”一章。

如果没有符合设备推荐尺寸的图标，则使用比推荐尺寸大的最小图标。如果没有超过推荐尺寸的图标，则使用最大的图标。

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

1. apple-touch-icon-80x80.png

2. apple-touch-icon.png

注意：  iOS 7上的Safari不会对图标添加效果。较旧版本的Safari将不会添加以-precomposed.png后缀命名的图标文件的效果。请参阅第一步：在iTunes Connect中识别您的应用程序以获取详细信息。

 

指定启动屏幕图像

在iOS上，与本地应用程序类似，您可以指定在Web应用程序启动时显示的启动屏幕图像。当您的Web应用程序脱机时，这是特别有用的。默认情况下，使用上次启动Web应用程序的屏幕截图。要设置其他启动映像，请在网页中添加链接元素，如：

<link rel =“apple-touch-startup-image”href =“/ launch.png”>

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

添加启动图标标题

在iOS上，您可以为启动图标指定Web应用程序标题。默认情况下，使用<title>标签。要设置不同的标题，请在网页中添加元标记，如：

<meta name =“apple-mobile-web-app-title”content =“AppTitle”>

在上面的例子中，替换AppTitle你的标题。

隐藏Safari用户界面组件

在iOS上，作为优化Web应用程序的一部分，它使用独立模式看起来更像是本机应用程序。当您使用这种独立模式时，Safari不会用于显示Web内容 - 具体来说，屏幕顶部没有浏览器URL文本字段或屏幕底部的按钮栏。屏幕顶部只显示状态栏。阅读更改状态栏的外观，了解如何最小化状态栏。

将apple-mobile-web-app-capable元标记设置yes为打开独立模式。例如，以下HTML使用独立模式显示Web内容。

<meta name =“apple-mobile-web-app-capable”content =“yes”>

您可以使用window.navigator.standalone只读布尔JavaScript属性来确定网页是否以独立模式显示。有关独立模式的更多信息，请参阅apple-mobile-web-app-capable。

更改状态栏外观

如果您的Web应用程序以独立模式显示为本机应用程序，则可以最小化iOS上屏幕顶部显示的状态栏。使用状态栏样式的中继标记。

除非您首先根据隐藏Safari用户界面组件的描述指定独立模式，否则此元标记不起作用。然后使用状态栏样式元标记，apple-mobile-web-app-status-bar-style根据您的应用需要更改状态栏的外观。例如，如果要使用整个屏幕，请将状态栏样式设置为半透明黑色。

例如，以下HTML将状态栏的背景颜色设置为黑色：

<meta name =“apple-mobile-web-app-status-bar-style”content =“black”>

有关状态栏外观的更多信息，请参阅“ iOS人机界面指南”的“UI条”一章。

链接到其他本地应用程序

您的网络应用程序可以通过创建具有特殊URL的链接来链接到其他内置的iOS应用程序。可用功能包括拨打电话号码，发送短信或iMessage，并在其原生应用程序中安装YouTube视频（如果已安装）。例如，要链接到电话号码，请按以下格式构造锚点元素：

<a href="tel:1-408-555-5555">致电我</a>

有关这些功能的全面介绍，请参阅Apple URL Scheme Reference。