iOS Web App之App设置

指定页面主屏幕图标

为整个网站的所有页面指定图标，将PNG格式、命名为apple-touch-icon.png或者 apple-touch-icon-precomposed.png放在网站根目录即可。如果使用apple-touch-icon-precomposed.png作为文件名，Safari不对图标添加任何效果（高光、圆角），反之则会自动添加高光、圆角等效果。
为单独页面指定图标，或者想为某个页面指定不同于整个网站的图标，则需要在网页head里添加一个link元素，如：
```
<link rel="apple-touch-icon" href="/custom_icon.png"/>
```
上例中，custom_icon.png可替换为自己的文件名以及相应的路径即可。如果不想Safari自动为图标添加效果，将apple-touch-icon改为apple-touch-icon-precomposed即可。

link元素添加size属性，可为不设备指定不同分辨率的图标，如：

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

没有设置sizes属性的link元素，默认设置为57×57，适配320×640的老设备；72×72适配ipad1、2，114×114适配retina屏的iPhone、iTouch，144×144适配iPad3、4。

如果没有设备推荐尺寸配置的图标，则优先使用比推荐尺寸大，但最接近推荐尺寸的图标；如果没有比推荐尺寸大的图标，则使用最接近推荐尺寸的图标；如果有多个尺寸匹配的图标，则优先使用含 precomposed 关键字的图标。

如果没用使用link元素指定图标，浏览器会自动搜索网站根目录下 apple-touch-icon... 或 apple-touch-icon-precomposed... 前缀的图标。如设备推荐尺寸为57 x 57，优先级如下：

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

更多网页图标尺寸详细信息查看 “Custom Icon and Image Creation Guidelines” 。

指定Web App启动画面

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

~~iPhone及iPod touch上的启动图片必须是纵向、320 x 460 pixels~~。

注：

以上信息来自Safari开发文档，应该是最老的版本,并没有设计iPhone Retina及iPad。

经试验和查阅相关资料,为不同设备设置不同的启动画面如下:

<!--Non-Retina iPhone (320x460)-->
<link href="i/startup-320x460.png" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="i/startup-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image" sizes="640x920">
<!-- iPhone (Retina) 4"-->
<link href="i/startup5.png" media="(device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image" sizes="640x1096">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="i/startup-768x1004.jpg" media="(device-width: 768px) and (orientation: portrait)"
      rel="apple-touch-startup-image" sizes="768x1004">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="i/startup-748x1024.jpg" media="(device-width: 768px) and (orientation: landscape)"
      rel="apple-touch-startup-image" sizes="748x1024">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="i/startup-1536x2008.jpg"
      media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image" sizes="1536x2008">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="i/startup-2048x1496.jpg"
      media="(device-width: 768px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image" sizes="2048x1496">

需要注意的是iPad 1/2横屏模式的启动画面分辨率为748x1024 pixels、纵向,图片内容旋转为横向。（国内外相关讨论都特别提到了这一边，因手头没有老设备，无法验证。）

使用Media Query匹配设备写法并不唯一，如匹配iPad还可以写成：

<!-- startup image for web apps - iPad - landscape (748x1024) 
 Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="(min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
 
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="ipad-portrait.png" media="(min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

因启动画面是Safari的私有属性，个人认为使用最简匹配不同iOS设备即可。如匹配iPhone 5其实只要media="(device-width: 568px)"就行。

隐藏Safari UI组件

iOS中，作为优化Web App的一部分，使用standalone模式可以使Web App看起来更接近原生App。使用standalone模式时，Safari地址栏和按钮栏将被隐藏，只在屏幕顶部显示系统状态栏。

将meta标签的apple-mobile-web-app-capable 设置为 yes 启用standalone模式。

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

可以使用window.navigator.standalone 只读布尔值JavaScript属性检测页面是否使用standalone模式。

更改状态栏外观

如果Web App启用了standalone模式，可以使用status-bar-style meta标签最小化系统状态栏。

apple-mobile-web-app-status-bar-style meta标签只有在standalone模式启用时才起作用。

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

链接到原生App

Web App可以通过创建特定的URL连接到iOS内置应用，包括拨打号码、发送短信息或者iMessage，以及打开YTB视频等。例如为电话号码添加锚：

<a href="tel:1-408-555-5555">Call me</a>

完整功能查看Apple URL Scheme Reference。

via Configuring Web Applications