Ionic Cordova - iOS 13+ 更改了 iPhone X 安全区域答案

【问题标题】：Ionic Cordova - iPhone X safe area has changed with iOS 13+Ionic Cordova - iOS 13+ 更改了 iPhone X 安全区域
【发布时间】：2020-11-26 23:20:30
【问题描述】：

我正在使用 cordova、Ionic v1 和 AngularJS 1.5.3 编写应用程序。

ionic info

Ionic:

   ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
   Ionic Framework   : ionic1 1.3.5
   @ionic/v1-toolkit : 1.0.22

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
   Cordova Plugins       : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
   NodeJS            : v10.21.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.4
   OS                : Windows 10

过去新的 iPhone X 出来了，我添加了一些代码来调整“安全区域”。

css

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

它为我工作了很长时间。

但是，我注意到使用 iOS 13.6 的 iPhone X 和 XR 我遇到了“安全区域”问题。

由于我使用的是 cordova-ios 6.1.0，所以我只使用 WkWebView。

<platform name="ios">
    <preference name="WKWebViewOnly" value="true" />

我发现我必须将 safe-area-inset-bottom 乘以 4 才能取得任何进展。

$calculated_padding_bottom: calc(env(safe-area-inset-bottom) * 2);

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) $calculated_padding_bottom env(safe-area-inset-left);
}

可能出了什么问题？

【问题讨论】：

标签： ios iphone cordova ionic-framework ios13

【解决方案1】：

从 11.2 开始，它已更改为“常量”

body {
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area- inset-bottom) constant(safe-area-inset-left);
}

您为什么使用 Ionic 1？

【讨论】：

这有助于解决部分问题。我将为我的问题的另一部分写一个新问题。