Ionic iPhone X安全領域が正しく動作しない

Question

私は、上部ツールバーと下部タブ領域の間にaを収めようとしています。 iPhone 5-XとiOS 10-11で動作する必要があります。 iOS10を無視すると、問題はありませんが、古いバージョンでも動作する必要があります。ここに私のCSSがあります。 "margin-top"はiOS 10のエラーを示しています。 "padding-top"を使用するとiPhone Xでは動作しません。これはLoadingControllerのカバーなので、JSからプログラムでソートする必要はありませんHTML（コントローラを正当に読み込むためにHTMLにアクセスする方法はわかりません）。私はこれをプログラムでGoogle Mapsに解決しましたが、CSS経由で解決策があるかどうか疑問に思っていましたか？私はすべての最新バージョンとWKWebViewを持っています。私のイオンビューは以下の通りです。

.loading-ios { 
    margin-top: constant(safe-area-inset-top); 
    margin-top: env(safe-area-inset-top); 
    margin-bottom: constant(safe-area-inset-bottom); 
    margin-bottom: env(safe-area-inset-bottom); 

    background-color: white; 
    opacity: 1 !important; 
    position: absolute; 
    top: 64px; 
    bottom: 49px; 
} 

CLIパッケージ：

@ionic/cli-utils : 1.19.0 
ionic (Ionic CLI) : 3.19.0 

グローバルパッケージ：

cordova (Cordova CLI) : 7.1.0 

ローカルパッケージ：

@ionic/app-scripts : 1.3.12 
Cordova Platforms : ios 4.5.4 
Ionic Framework : ionic-angular 3.9.2 

システム：

ios-deploy : 1.9.2 
ios-sim : 5.0.12 
Node  : v8.9.3 
npm  : 5.5.1 
OS   : macOS High Sierra 
Xcode  : Xcode 9.2 Build version 9C40b 

Answer 1

margin-top: 20px; /* Status bar height on iOS 10 */ 
    margin-top: constant(safe-area-inset-top); /* Status bar height on iOS 11.0 */ 
    margin-top: env(safe-area-inset-top); /* Status bar height on iOS 11+ */ 

それぞれ20pxの上/下の移動でそれぞれ減少します。