Question

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

Answer 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 显示更长的时间来“隐藏”它 :)

Answer 2

更好的解决方案可能是将statubar保留为默认值（让它超载你的webview）

在config.xml

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

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

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

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

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

2 个答案: