h5 app的全屏和沉浸式狀態欄是不一樣的
全屏模式
常見使用場景:如果頁面是全屏游戲,一般會直接讓狀態欄消失,也就是頁面全屏。webview高度全屏了,狀態欄沒有了。
寫法:
終端支持:
沒有終端類型限制
高度處理:與狀態欄透明相同,webview高度=屏幕高度,狀態欄高度為0且不顯示前景內容。需要注意dom里fix元素的調整。
使用方法
勾選全屏模式即可,也可以直接才配置文件manifest.json文件中添加的根節點下添加字段 "fullscreen":true 根節點應該理解吧
{ ..., //這就是根節點 "fullscreen":true }
注意,如果是劉海屏的屏幕,他的狀態欄區域仍會存在,現在的手機大多數都是劉海屏,所以這種方式就不能滿足需求了
沉浸式狀態欄
狀態欄透明(沉浸式)
常見使用場景:如果頁面頂部是圖片,一般會把狀態欄變成透明,此時同時會處理成滾動后恢復為純色title,比如流應用中的36kr:

這個需要改三個地方
第一 取消全屏模式 全屏模式的配置會重置沉浸式狀態欄的配置
第二 在以下三個地方添加 三個字段 然后保存 就ok了

下一章 我會講講全屏模式下 隱藏底部導航菜單后出現的空白部分的剞劂方案