Gap between ons-toolbar and statusbar iOS

Question

I am using the onsenUI framework in combination with Cordova in order to create a hybrid application.

For some reason I observe a gap between the toolbar (text) and the iOS statusbar (iPhone 6s, iOS 11) which is larger then should, see the link for an example. example of toolbar

To troubleshoot this issue and to be sure the issue in not caused by my own code I took the code of the very simple example of the toolbar reference at https://onsen.io/v2/api/js/ons-toolbar.html to see what happened on the same iPhone (no own css file used) and the same behaviour is observed.

I am using Cordova to build the App and used the basis settings for the config.xml which are part of the standard Cordova app template. I am applying version 2.8.2 of Onsen, also tried the CDN version. I am using a real iPhone for testing build via XCode.

To confirm it’s not Cordova, I also used plain HTML and also a kitchensick from Framework7 and for both no gap was observed with the same Cordova setup, so something is related with the Onsen setup.

The gap is not shown while running the app in a browser.

Do anyhow has the same behavior and/or an idea what is going on?

Answer 1

You have to add viewport-fit=cover to the viewport meta tag of your index.html

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