获取正确大小的 android 状态栏并将其应用于 HTML？答案

【问题标题】：Get the right size of android status bar and apply it to HTML?获取正确大小的 android 状态栏并将其应用于 HTML？
【发布时间】：2017-01-04 04:12:35
【问题描述】：

我正在制作一个网络应用程序，我正在使用cordova/phonegap。我在这个应用程序中有不同的主题，我想让状态栏颜色随主题变化，所以我决定用固定的透明（半透明）状态栏使应用程序全屏，这样颜色会在它后面改变。在 HTML 中，我为状态栏添加了一个 20 像素的小顶部填充。问题是所有android设备上的状态栏大小都不一样，但我将状态栏高度设置为20px，但在某些设备上不是20px！我可以获取设备的状态栏高度并将其应用于 HTML 中的状态栏高度吗？感谢您的帮助和回答！

【问题讨论】：

您可以在帖子中添加代码吗？
忘了提一下，我使用的是Framework7，所以我有来自那里的代码framework7.io/docs/status-bar.html

标签： android cordova statusbar transparent

【解决方案1】：

我认为最好的解决方案如下：

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 来“隐藏”它 :)

【讨论】：

【解决方案2】：

更好的解决方案可能是将状态栏保留为默认值（让它超载您的 web 视图）

在config.xml

<preference name="StatusBarOverlaysWebView" value="true" />

并根据您加载的主题更改其颜色

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    if ( /* theme  */ )
        StatusBar.backgroundColorByHexString("#C0C0C0");
}

【讨论】：