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

何为沉浸式？css

沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度html

何为状态栏？html5

状态栏就是手机顶部，显示时间电量那一行ios

除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不一样手机状态栏高度又不太同样，须要咱们去适配，有一个段子说，若是看到那个手机适配有问题，赶忙把那个手机藏起来，不要让测试发现了。web

咱们用HBuilder建立的应用默认是不开启沉浸式的，须要咱们手动以下配置开启。正则表达式

打开应用的manifest.json文件，切换到代码视图，在plus -> statusbar 下添加immersed节点并设置值为true。json

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

}

因为各系统版本的限制，沉浸式状态栏对系统有要求(Android4.4及以上、iOS7.0及以上，这部分手机应该早已淘汰)，若是要兼容各系统版本，须要动态判断当前环境是否支持沉浸式状态栏以及系统状态栏的高度：app

使用5+API测试

判断当前环境是否支持沉浸式状态栏

plus.navigator.isImmersedStatusbar()

若是当前支持沉浸式状态栏则返回true，不然返回false。

获取当前系统状态栏高度

plus.navigator.getStatusbarHeight()

获取系统状态栏高度，Number类型。

其单位是逻辑像素值，即css中可直接使用的像素值，可能存在小数点

可是5+API须要在plusready事件后才能调用，一般此事件在DOM加载渲染后才会触发，没法再渲染前根据不一样的状态来设置css。因此会致使位置的一个闪动。ui

为了解决此问题，在支持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里设置好头部便可。

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