Yes, this is web/css concern, not a Capacitor one. For what it’s worth, Ionic Framework handles this for you.

Forget it, I was missing the viewport-fit=cover in the meta tag. Thanks!

You should use CSS for this: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

If you need to know the safe area insets in JS, you can do this using this library: https://github.com/zhetengbiji/safeAreaInsets

I am doing this and it works perfectly.

webview inside capacitor is returning 0 for env(safe-area-inset-top) in an iPhone X

Unfortunately it does not work with android yet.

@mcqj capacitor does not provide you with those values as it’s not needed - the browser that your app runs inside already has this information and you can access it using css with or without js (see links I posted previously).

FWIW, I recently had to implement this as well. The approach I took that worked was:

1. Detect the type of device using the Device API
2. Using JavaScript, fetch and match screen viewport sizes to the known sizes for iPhones/iPads with notches
3. If a match is found, append a css class to the body tag (ex: “ios”, “iphone”, “notch”, etc.)
4. Create CSS styles that modify based on the platform-specific classes you create.