cordovaweb-applicationsvuetify.js

cordova mobile header overlaps IOS icons

I am using Cordova for my webapp with vuetify 2.

As you can see from the screenshot the title of the app ie header is overlaped with the icons of my IOS phone. Is there a way to have the app starting below the icons (without having to play with css) ? i.e. a plugin or a configuration for the status bar ?

enter image description here Thanks

Pat

Solution

  • You can use cordova-plugin-statusbar plugin for that.

    in your config.xml file add the following lines.

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

    in your HTML, make sure you add this in your meta tag.

    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

    In your deviceReady function, add this as well

    StatusBar.overlaysWebView(false);