如何讓 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​

​ 為不透明，看不到下面的内容。

這兩個行為隻會在你把這個頁面添加到主螢幕時才會生效。

注意，這個功能需要你的頁面是或項目是單頁面應用才行，如果是多個 html 頁面的項目，在使用的時候很不友好，像這樣：（跳轉時上面和下面會多出工具欄）

如何讓頁面以獨立 app 的形式運作