Ios webview with capacitor, set safe areas

Question

Using capacitor to build an app in ios. In ios the webview covers the whole screen, for iphone-x that means the notch will be included and content will go behind it, like the picture on the right. But i want the picture on the left, black bars on 'no go areas'.

The expected solution (html/css) for this would be to set correct viewport and use the 'safe-area'insert-?', se: https://css-tricks.com/the-notch-and-css/ But for the webview in ios the 'safe-area'insert' will always be 0, that is how it works => this solution is useless.

How can i solve this? Can i change the webview to not cover the whole screen, without changing in the capacitor-framework?

Answer 1

You can use a compatible Cordova plugin cordova-plugin-safearea

npm i -D cordova-plugin-safearea
npx cap sync

With this installed, you can request the safe margin area over the cordova/capacitor bridge:

// Types for clarity
type SafeArea = {
  top: string,
  bottom: string,
}

window.plugins.safearea.get(
  (result: SafeArea) => {
    // elegantly set the result somewhere in app state
  },
  (error: any) => {
    // maybe set some sensible fallbacks?
  }
);

You could use these values to specify extra padding on the body, or on your header / bottom-menu components

The docs say it returns the values as Numbers, but it seems to me they are actually strings (consider parseFloat before doing math with them).

---

I have just implemented this in React (running the getter in React.useLayoutEffect); the project is wrapped in Capacitor and have tested on two iOS devices with different ingenious Apple notch screen formats (iPhone 8 and iPhone 11 Pro).

Refer to the documentation for more at https://github.com/rickgbw/cordova-plugin-safearea