Cordoba iOS white bar upstairs

Question

After adding StatusBarOverlaysWebview to config.xml, I get a white bar at the top of the screen and all the content is pushed down (see screenshot - there is a white bar in the status bar). Therefore, instead of adding the height of the status screen (20 pixels), 40 pixels are added to the screen.

I double-checked all my styles and everything looks great, so I think this is caused by the plugin somehow. Can someone tell me how to solve this?

This is my configuration:

<preference name="StatusBarOverlaysWebview" value="false" />
<preference name="StatusBarBackgroundColor" value="#FF543E" />
<preference name="fullscreen" value="true" />

This is what it looks like without setting the color and using window.StatusBar.overlaysWebView (false); instead of config.xml

Answer 1

Try this, below code works for me:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#2D81C1" />
<preference name="Fullscreen" value="false" />

, , plug-in

. iOS 11 iPhone X HTML

index.html :

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

ionic- angular .

: iOS 11

Answer 2

, Status Bar.

Try with below code.

 <preference name="StatusBarOverlaysWebView" value="false" />
 <preference name="StatusBarStyle" value="lightcontent" />
 <preference name="StatusBarBackgroundColor" value="#FF543E" />

Answer 3

:

config.xml :

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

app.run.js

if (window.StatusBar) {
  // cordova plugin org.apache.cordova.statusbar is used
  window.StatusBar.styleLightContent();
}

Answer 4

I think you are using OnsenUI, so this will be a problem ... Not a state plugin. Try ons.disableAutoStatusBarFill (); to solve the problem;)

Answer 5

This seems to be a bug in the way Cordoba handles the iOS 11 status bar. As a fix, you can put

    <meta name="viewport" content="viewport-fit=cover">

in your index.html.