html – How do I hold a Cordova app from hiding beneath the standing bar on iOS?

July 18, 2024

1

I am making an attempt to construct an Ionic/Cordova app, and for some motive, on iOS it loves to cover a part of itself behind the standing bar.

Is there any approach to persuade it to deal with the standing bar as not inside the app so the standing bar by no means will get overlaid with HTML?

Here is the present index.html, with feedback eliminated and the title redacted:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <script>
    (perform(w){var i=w.SENTRY_RELEASE=w.SENTRY_RELEASE||{};i.id='2.0.0';})(this);
    </script>

    <meta charset="UTF-8">
    <title>REDACTED</title>
    <meta title="viewport" content material="viewport-fit=include, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta title="format-detection" content material="phone=no">
    <meta title="msapplication-tap-highlight" content material="no">
    <hyperlink rel="icon" sort="picture/x-icon" href="belongings/icon/favicon.ico">
    <meta title="theme-color" content material="#4e8ef7">

    <meta title="apple-mobile-web-app-capable" content material="sure">
    <meta title="apple-mobile-web-app-status-bar-style" content material="black">

    <script src="cordova.js"></script>
</head>
<physique>
    <app-root>
    </app-root>

    <script>
        if('#/forgot-password' !== location.hash) {
            location.hash="";
        }
    </script>
</physique>
</html>

Ought to I simply add fashion="padding-top: var(--ion-safe-area-top);" to the <physique> tag? Would that work?

Supply hyperlink