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

何爲沉浸式？

沉浸式就是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裏設置好頭部便可。

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