Ionic Cordova-iPhone X的安全区域已随着iOS 13+的变化 [英] Ionic Cordova - iPhone X safe area has changed with iOS 13+

问题描述

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

I'm writing an app with cordova, Ionic v1, and 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出现了，我添加了一些代码来修饰安全区域".

In the past the new iPhone X came out and I added some code to make adustments for the "safe area".

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">

它为我工作了很长时间.

It was working for me for a long time.

但是，我注意到使用iOS 13.6的iPhone X和XR在安全区域"方面存在问题.

However, I noticed that with the iPhone X and XR with iOS 13.6 I'm having issues with the "safe area".

当我使用cordova-ios 6.1.0时，我仅使用WkWebView.

As I'm using cordova-ios 6.1.0 I'm using WkWebView only.

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

我发现我必须将安全区域插入底数乘以4才能取得进展.

I'm finding that I have to multiply the safe-area-inset-bottom by 4 to make any progress.

$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);
}

有什么问题吗?

推荐答案

已更改为常量"；截至11.2

It has changed to "constant" as of 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?

Why are you using Ionic 1?

这篇关于Ionic Cordova-iPhone X的安全区域已随着iOS 13+的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！