我可以获取状态栏高度并将其应用于 HTML 吗？

Question

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

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

问题是状态栏在所有 android 设备上的大小不同，但我设置了状态栏 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 开始大约需要 150 毫秒，您可以通过稍微延长 SplashScreen 来“隐藏”它:)

我可以获取状态栏高度并将其应用于 HTML 吗？

Can I get the status bar height and apply it to HTML?

html

statusbar

cordova