沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！

Posted 2020-11-29 xiaoyeya

何为沉浸式？

沉浸式就是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里设置好头部即可。

你学会了吗？赶紧新建一个项目试试吧。