Status Bar on iOS Background Color

问题

I’m having a hard time setting the iOS status bar background color to transparent. I’m using the latest version of cordova statusbar and ionic, and leaving everything to their default setting, however i’m getting a white background color for some reason. How can i set the background color to transplant, i though this is the default value anyhow.

回答1:

Okay so after referring to:

https://issues.apache.org/jira/browse/CB-12886 and
https://issues.apache.org/jira/browse/CB-12890

The issue occurs in iOS 11, and cordova-ios-4.5.0 and is simply solved by adding the cover value to viewport-fit as follows in your index.html:

   <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

回答2:

As maintained by luckystarr. Plugin cordova-plugin-statusbar will help you achieve what you want to do.

After adding plugin add following preference in config.xml to get black background

<preference name="StatusBarBackgroundColor" value="#000000" />

To change the color of icons and text in status bar you can use

<preference name="StatusBarStyle" value="lightcontent" />

Available values are default, lightcontent, blacktranslucent, blackopaque.

回答3:

This worked for me:

Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside <platform name='ios'> tag
index.html Add <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
Save.
Launch the simulator.

回答4:

If you are using statusbar plugin, you should also update it to latest version (2.3.0 has just been released). This new version of the plugin handles the iPhone X notch.

BTW, the problem has nothing to do with the cordova-ios version, it's a new "feature" of the WebView when you compile the apps with iOS 11 SDK (it won't appear if you use Xcode 8 as it uses SDK 10). viewport-fit=cover is the way to go for removing this fake statusbar.