目前项目开发中，H5页面采用透明状态栏，由H5来负责状态栏区域的绘制。这就遇到一个问题，不同的手机有不同的状态栏高度，而只有Android原生才能获取状态栏的高度信息。解决方案也很明朗，需要将状态栏的高度传递给H5页面。
一、获取状态栏高度
Android获取状态栏高度的代码如下：
private static final String STATUS_BAR_HEIGHT_RES_NAME = "status_bar_height";
public static int getStatusBarHeight(@NonNull Context context) {
Resources res = context.getResources();
int result = 0;
int resourceId = res.getIdentifier(STATUS_BAR_HEIGHT_RES_NAME, "dimen", "android");
if (resourceId > 0) {
result = res.getDimensionPixelSize(resourceId);
}
return result;
}
二、JS注入状态栏高度
首次采用的方案是H5页面加载完成后，通过JS获取状态栏高度。但是该方案存在获取状态栏高度时机太晚，导致页面状态栏高度跳动的问题。
改进方案是在页面加载开始时进行JS注入。注入语句需与H5开发人员商量
public static final String INJECT_STATUS_BAR_HEIGHT = "javascript:var h5InitData = {}; h5InitData.status_bar_padding = ";
new WebViewClient(){
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
view.loadUrl(INJECT_STATUS_BAR_HEIGHT + StatusBarCompat.getFakeStatusBarHeight());
}
......
}
CSS px与Android Px
H5顺利拿到了注入的状态栏高度信息，但是出现了新的问题。原生获取的状态栏高度的信息单位是Android px物理像素，但是直接在H5中使用时，出现了状态栏高度超过预期的问题。
查找资料得知，css中1px并不等于手机的物理像素1px。尤其是随着技术的发展，移动设备的屏幕像素密度越来越高，一个css像素可能等于2个甚至3哥设备的物理像素。根据设备的不同，屏幕像素密度的不通过，安卓设备上一个css像素相当于多少物理像素也不同。
还有一个缩放因素，也影响了css像素和物理像素的比例。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
我们项目中因为线宽的问题，确实进行了缩放，这也是导致问题的一个因素。
< meta width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,target-densitydpi=device-dpi>
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
有上述可知，css像素的概念与android dp的概念有些相似。
最终为了兼容问题，将状态栏高度的数据改为dp为单位，并配合缩放的数据，来作为css像素值。
参考文档：
Android dp 和 CSS px
移动前端开发之viewport的深入理解
devicePixelRatio
网友评论