他们是如何做到的 - 添加到主屏幕的移动网站显示为独立应用程序

Question

所以我只看到一个网站这样做,我很想知道他们是怎么做到的.我顺便使用带有iOS5的iPhone 4.

在手机Safari上访问http://m.funnyordie.com/(Will Ferrell的素描喜剧网站),将其添加到主屏幕,然后点击刚刚添加的主屏幕图标.

移动网站显示没有任何Safari按钮或地址栏.它甚至在打开的应用程序托盘中显示为一个开放的独立应用程序(双击主页按钮,看看我在滑稽或死亡不在前台时的意思).

您可以浏览页面上的视频甚至搜索,但是当您单击其中一个选项卡(最常查看,FoD独家)时,它会将您带到Safari应用程序以获取新选项卡.

我从未见过其他人这样做,我很想知道他们是怎么做到的.谁知道？

Answer 1

它被称为Web Clip,如果你在html中指定一些元数据,你可以在主屏幕上显示一个图标

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

要添加图标:

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

要有一个启动图像:

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

要隐藏导航栏:

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

要更改状态栏外观:

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