沉浸式，狀態欄高度，劉海屏怎么開啟，怎么適配？看這！

何為沉浸式？

沉浸式就是app的頭部和狀態欄和何為一體的，webview即為整個手機的高度

何為狀態欄？

狀態欄就是手機頂部，顯示時間電量那一行

除此還有劉海屏，水滴屏，挖孔屏，全面屏，非劉海屏，不同手機狀態欄高度又不太一樣，需要我們去適配，有一個段子說，如果看到那個手機適配有問題，趕緊把那個手機藏起來，不要讓測試發現了。

我們用HBuilder創建的應用默認是不開啟沉浸式的，需要我們手動如下配置開啟。

打開應用的manifest.json文件，切換到代碼視圖，在plus -> statusbar 下添加immersed節點並設置值為true。

"plus": {
    "statusbar": {
        "immersed": true
    }
}

由於各系統版本的限制，沉浸式狀態欄對系統有要求（Android4.4及以上、iOS7.0及以上，這部分手機應該早已淘汰），如果要兼容各系統版本，需要動態判斷當前環境是否支持沉浸式狀態欄以及系統狀態欄的高度：

使用5+API

• 判斷當前環境是否支持沉浸式狀態欄
  plus.navigator.isImmersedStatusbar()
  如果當前支持沉浸式狀態欄則返回true，否則返回false。
• 獲取當前系統狀態欄高度
  plus.navigator.getStatusbarHeight()
  獲取系統狀態欄高度，Number類型。
  其單位是邏輯像素值，即css中可直接使用的像素值，可能存在小數點

 但是5+API需要在plusready事件后才能調用，通常此事件在DOM加載渲染后才會觸發，無法再渲染前根據不同的狀態來設置css。所以會導致位置的一個閃動。

為了解決此問題，在支持5+API運行環境的userAgent中特定字段Html5Plus/1.0后添加Immersed標識，如下：
"Html5Plus/1.0 (Immersed/30)"
其中Immersed/后的30表示狀態欄的高度，單位為邏輯像素值。

可以使用正則表達式進行獲取：

 

var immersed = 0;  
var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);  
if(ms&&ms.length>=3){ // 當前環境為沉浸式狀態欄模式  
    immersed=parseFloat(ms[2]);// 獲取狀態欄的高度  
}

開啟了沉浸式，頁面就會往上移，頭部和狀態欄重合，所以我們設置界面頭區域的頂部內邊距為狀態欄的高度

var t=document.getElementById('header');  
t&&t.style.paddingTop=immersed+'px';

不管是ios還是安卓，不管是劉海屏還是非劉海屏，都不用單獨去設置了，在公共js里設置好頭部即可。

你學會了嗎？趕緊新建一個項目試試吧。