我可以得到状态栏的高度，并将其应用到HTML

Question

我正在制作一个web应用程序，我正在使用cordova/phonegap。

我在这个应用程序中有不同的主题，我想使状态栏颜色随主题变化。因此，我决定让应用程序全屏使用一个固定的透明(半透明)状态栏，这样它后面的颜色就会改变。在HTML中，我为状态栏添加了一个小的顶部padding:20px。

问题是，状态栏是不相同的大小在所有的安卓设备，但我设置状态栏height:20px，但在一些设备上它不是20px!

我可以得到设备的状态栏高度，并将其应用到HTML中的状态栏高度吗?

谢谢你的帮助和回答!

Answer 1

我找到了我想要的，我想出了使用3.90625vh的人像和6.94444vh的风景。在我的css中输入:

@media screen and (orientation:portrait) {
      .statusbar { height: 3.90625vh; }
}
@media screen and (orientation:landscape) {
      .statusbar { height: 6.94444vh; }
}

此方法适用于所有android设备，但不适用于iOS!

Answer 2

虽然有一点延迟，但以下工作:

document.addEventListener('deviceready', () => {
    var initialHeight = document.documentElement.clientHeight;
    window.addEventListener('resize', resizeFunction);
    function resizeFunction() {
        console.log('STATUS BAR HEIGHT', document.documentElement.clientHeight - initialHeight);
        window.removeEventListener('resize', resizeFunction);
    }
    StatusBar.overlaysWebView(true);
});

从deviceready开始大约需要150ms，可以"隐藏"。通过显示SplashScreen更长一点:)