Status bar on iOS background color

Question

It's hard for me to set the background color of the iOS status bar to transparent. I use the latest version of the cordova and ionic status bar and leave everything until their default settings, however for some reason I get a white background color. How to set the background color for transplantation, although this is the default value anyway.

Answer 1

Good, therefore, referring to:

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

The problem 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" /> 

Answer 2

How luckystarr is supported. The cordova-plugin-statusbar plugin will help you achieve what you want to do.

After adding the plugin, add the following preference to config.xml to get a black background

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

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

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

Available defaults: lightcontent, blacktranslucent, blackopaque.

Answer 3

This worked for me:

1. Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

2. config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside the <platform name='ios'>

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

4. Launch cordova build ios

5. Run the simulator.

Answer 4

If you use the statusbar plugin, you must also upgrade it to the latest version (2.3.0 has just been released). This new version of the plugin handles iPhone X.

By the way, the problem has nothing to do with the cordova-ios version, this is the new WebView "feature" when compiling applications with the iOS 11 SDK (it will not appear if you use Xcode 8 as it uses the SDK 10). viewport-fit=cover is a way to remove this fake status bar.

Answer 5

Please check the following

window.cordova.plugins.StatusBar.overlaysWebView (false);

It worked for me.