Блог

Главная - Вопросы по программированию - Небезопасные области за вырезами на экране IOS 14 изменения

Небезопасные области за вырезами на экране IOS 14 изменения

#ios #cordova #splash-screen #ios14 #multi-device-hybrid-apps

#iOS #кордова #заставка #ios14 #приложения для нескольких устройств -гибридные-приложения

Вопрос:

Приложение 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" />

введите описание изображения здесь

Ответ №1:

Вы не указали высоту в своем окне просмотра, попробуйте

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

Комментарии:

1. Пробовал, но у меня не получилось, что-то с окном просмотра 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
чтобы сохранить нижнее меню внизу.

По сути, вы принудительно устанавливаете полную высоту окна просмотра.

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

Особенно, если в вашем приложении изменилась ориентация.