/ iOS

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,优先级如下:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. 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 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