h5 app 設置全屏


h5 app的全屏和沉浸式狀態欄是不一樣的

全屏模式

常見使用場景:如果頁面是全屏游戲,一般會直接讓狀態欄消失,也就是頁面全屏。webview高度全屏了,狀態欄沒有了。
寫法:

終端支持:
沒有終端類型限制
高度處理:與狀態欄透明相同,webview高度=屏幕高度,狀態欄高度為0且不顯示前景內容。需要注意dom里fix元素的調整。

使用方法

勾選全屏模式即可,也可以直接才配置文件manifest.json文件中添加的根節點下添加字段 "fullscreen":true 根節點應該理解吧

{
 ...,
//這就是根節點
 "fullscreen":true
}

 

注意,如果是劉海屏的屏幕,他的狀態欄區域仍會存在,現在的手機大多數都是劉海屏,所以這種方式就不能滿足需求了

沉浸式狀態欄

狀態欄透明(沉浸式)

常見使用場景:如果頁面頂部是圖片,一般會把狀態欄變成透明,此時同時會處理成滾動后恢復為純色title,比如流應用中的36kr:

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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM