Layout issue Header on iPhone X

Ionic Framework
1

I have a strange issue on iphone X header . I attach the screen, could you please help me?

22
Simulator Screen Shot - iPhone X - 2019-05-08 at 22.11.22.jpg1125×2436 433 KB

Thanks
L

2

The Very first thing to check is the Meta that should be like this

name=“viewport” content=“viewport-fit=cover, width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1”

And if it does not resolve your issue then try to update the status bar plugin. Run the following command.

but before doing that remove the previously installed status bar plugin and then install the above it will surely fix your problem.

References GitHub link : https://github.com/apache/cordova-plugin-statusbar.git

If the issue still Persists then Kindly check your Global.SCSS file and look for the following

  • .platform-ios.platform-cordova:not(.fullscreen) and find the toolbar-ios in that and adjust the header properties according to your requirements.