他们是如何做到的 - 添加到主屏幕的移动网站显示为独立应用程序 [英] How do they do this - Mobile Site Added to Homescreen Appears as Standalone App

问题描述

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

So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.

转到 http：/ /m.funnyordie.com/ （Will Ferrell的素描喜剧网站）在移动版Safari上，将其添加到主屏幕，然后点击刚刚添加的主屏幕图标。

Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.

移动网站显示时没有任何Safari按钮或地址栏。它甚至会在打开的应用程序托盘中显示为一个开放的独立应用程序（双击主页按钮，看看我的意思是当Funny或Die不在前台时）。

The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).

您可以浏览页面上的视频甚至搜索，但是当您单击其他选项卡（最常查看，FoD独家）时，它会将您带到Safari应用程序以获取新选项卡。

You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.

我从未见过其他人这样做，我很想知道他们是怎么做到的。有人知道吗？

I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?

推荐答案

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

It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon

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" />

这篇关于他们是如何做到的 - 添加到主屏幕的移动网站显示为独立应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！