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吗？

2 个答案: