如何让 web 页面以独立 app 的形式运行 meta: apple-mobile-web-app-capable

如何让 web 页面以独立 app 的形式运行 meta: apple-mobile-web-app-capable

看个例子

你可能不知道的一个功能：
web 单页面应用可以在手机端以类似独立 app 的形式运行。

就像下面这样，

1. 没有上下的工具栏
2. 切换的时候跟普通 app 没什么两样
3. 查看线上的例子： 标题日记

让页面实现 standalone 功能

苹果官方对 safari 可用 meta 标签的说明
Safari HTML Reference - Supported Meta Tags

只需要添加下面一行即可

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

apple-mobile-web-app-capable 如果设置 content 为 yes，应用以全屏模式运行，否则不会在全屏中运行。
apple-mobile-web-app-status-bar-style 用于定义状态栏文字颜色的，可选值有 default black-translucent black

black-translucent 为透明，内容滚动的时候，透过状态栏可以看到下面的内容。
default black 为不透明，看不到下面的内容。

这两个行为只会在你把这个页面添加到主屏幕时才会生效。

注意
这个功能需要你的页面是或项目是单页面应用才行，比如 vue 项目。如果是多个 html 页面的项目，在使用的时候很不友好，像这样：（跳转时上面和下面会多出工具栏）

如何让页面以独立 app 的形式运行