屏幕 IOS 14 更改中凹槽后面的不安全区域答案

【问题标题】：Unsafe areas behind notches in the screen IOS 14 changes屏幕 IOS 14 更改中凹槽后面的不安全区域
【发布时间】：2021-03-24 05:07:36
【问题描述】：

Cordova IOS 应用程序显示白屏。我正在使用 xcode 12.0 版。 Cordova IOS平台版本为6.1.0。（或 6.1.1）Cordova 版本是 10.0.0。我正在为 IOs14 进行所有更改。对于 iPhone XR 设备，我使用的是元标记：

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

但在第一次启动后，我仍然看到下面的空白区域到缺口区域。以下是 config.xml 文件中的插件详细信息和首选项。

Cordova 10
Cordova-ios: 6.1.1
**@globules-io/cordova-plugin-ios-xhr 1.1.0 "Cordova WKWebView File XHR Plugin"**
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-camera 2.3.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-keyboard 1.2.0 "Keyboard"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-whitelist 1.3.4 "Whitelist"
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

enter image description here

【问题讨论】：

标签： ios cordova splash-screen ios14 multi-device-hybrid-apps

【解决方案1】：

您没有在视口中包含高度，请尝试

 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">

【讨论】：

试过但对我不起作用，它有一些东西，WKWebView 视口在第一次加载时无法获取完整的设备高度。如果我重新加载应用程序，它会正确加载。

【解决方案2】：

我用

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

确保你有安全区域 css，例如：

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

您必须查看VisualViewport 将底部菜单保持在底部。

基本上你强制视口 div 的全高。

//not tested
window.visualViewport.addEventListener('resize', function () {
document.getElementById("myDiv").style.height = window.innerHeight;
});

尤其是当您的应用发生方向变化时。

【讨论】：