Ionic ion-view header behind ios status bar

Question

How do I avoid ionic header from getting behind ios status bar like this?

I created the header with following code:

Answer 1

The solution with StatusBar.styleDefault(); did not work for me, but calling StatusBar.overlaysWebView(false) did the job.

First screenshot is UI of the app before calling StatusBar.overlaysWebView(false), you can see that the iOS status bar is over the app and user cannot click the whole area of menu button:

Now when I call StatusBar.overlaysWebView(false), the iOS status bar is no longer over the menu button:

Answer 2

Try this for Ionic 5.x, just put index.html inside

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

Answer 3

adding margin won't work exactly. It will only create an empty space at the bottom of your screen.

The fix is to make sure you have viewport-fit = cover in your app's meta tag.

Answer 4

From: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/

Ionic has specific classes to deal with this – platform-ios and platform-cordova. Ionic’s pre-built elements target those classes and add in 20px top margin to the buttons in your header to make up for these situations. To get my own custom elements to do the same, I follow the same pattern. For my .search-bar above, I add a margin if we’ve got a .platform-ios.platform-cordova:not(.fullscreen) body class. Example:

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
     margin-top: 20px;
}

This should be the correct answer.

Answer 5

Add following code in config.xml

<preference name="SplashShowOnlyFirstTime" value="false" /><br>
<preference name="SplashScreen" value="screen" /><br>
<preference name="SplashScreenDelay" value="3000" /><br>

App.component.ts<br>
Inside constructor<br>
this.statusBar.overlaysWebView(false);<br>
this.statusBar.styleLightContent()

Answer 6

This code is working for me with ionic 3 (3.7.1) Open App.scss in app folder then add this code:

.platform-ios 
{
  page-home { // replaced by your page HERE
     top: 20px !important;
  }
}