InAppBrowser header issue for iPhone X or similar devices, which uses notch header display - Solution

Ionic Native
1

Here is a working workaround/example tested on iOS/Android devices having notch display to make header fit to screen.

Plugin Version - **<plugin** name **=** "cordova-plugin-inappbrowser" spec **=** "^3.0.0" **/>**

InAppBrowser plugin adds hard coded header for iOS devices which 22px which is not equivalent for notch displays.

To fix this simply go to XCode before running project and comment the below file content, it can’t be done in the workspace plugin list as it will over ride each time you build project.

Select : Project --> Plugins --> CDVInAppBrowser.m and comment out the code

//statusBarFrame.size.height = STATUSBAR_HEIGHT;

2

It doesn’t work with the _self option that uses InAppBrowser for URL handling … Has anyone solved it that way?

3

@champion007 I think you should try the following mentioned things to fix the iPhone X header issue
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.