如何让 web 页面以独立 app 的形式运行 meta: apple-mobile-web-app-capable
看个例子
你可能不知道的一个功能:
web 单页面应用可以在手机端以类似独立 app 的形式运行。
就像下面这样,
- 没有上下的工具栏
- 切换的时候跟普通 app 没什么两样
- 查看线上的例子: 标题日记
让页面实现 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 页面的项目,在使用的时候很不友好,像这样:(跳转时上面和下面会多出工具栏)
