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

【问题标题】：Can I get the status bar height and apply it to HTML?我可以获取状态栏高度并将其应用于 HTML 吗？
【发布时间】：2023-03-17 18:00:01
【问题描述】：

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

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

问题是所有android设备上的状态栏大小不一样，但我设置了状态栏height:20px，但在某些设备上不是20px！

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

感谢您的帮助和回答！

【问题讨论】：

标签： html cordova statusbar

【解决方案1】：

我找到了我正在寻找的东西，我想出使用 3.90625vh 用于纵向和 6.94444vh 用于横向。在我的 CSS 中有：

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

此方法适用于所有安卓设备，但不适用于 iOS！

【讨论】：

【解决方案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 来“隐藏”它 :)

【讨论】：