PhoneGap / Cordova: зазубрины iPhone кровоточат в приложении

Question

Я создал приложение Cordova, которое просто запускает InAppBrowser для отображения веб-приложения.На iPhone XR приложение имеет черную рамку в верхней части и кнопку, которая не покрывается надписью на iPhone.Все работает как положено.Теперь я хотел обменять заставку, чтобы показать мой собственный экран запуска.Я добавил свою собственную информацию заставки в config.xml:

<platform name="ios">
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
</platform>

После добавления этой информации я выполнил:

cordova platform remove ios
cordova platform add ios
cordova build ios

Затем я запускаю Xcode и запускаю симуляцию на iPhone XR,Новый экран-заставка отображается правильно, но черные границы сверху и снизу приложения больше не отображаются.Вместо этого метка каким-то образом сливается с приложением, липкая строка меню веб-страницы перемещается ниже метки, но над меню все еще можно увидеть содержимое веб-сайта в фоновом режиме.

Почему меняется заставкаполностью изменить макет приложения?

На своей веб-странице я уже добавил заголовок области просмотра:

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=contain">

Ожидаемое поведение (без настраиваемого заставки): После добавления собственного заставки:

Answer 1

После еще одного исследования я обнаружил:

Показанные "черные полосы" являются запасным вариантом, когда не найдено подходящих изображений заставки.Поэтому, когда я добавил правильные заставки, приложение отображалось правильно, используя полную высоту экрана.Независимо от того, отображается ли липкое меню в самом верху экрана (частично покрытого меткой) или ниже метки с частично показанным выше содержанием веб-сайта, можно настроить, добавив метатег на веб-сайт:

<meta name="viewport" content="viewport-fit=cover" />

В тех случаях, когда «cover» позволяет метке покрывать контент, а «instance» перемещает контент ниже метки.

Чтобы применить этот метатег, необходимо активировать эту функцию в своем файле config.xml cordova:

<preference name="EnableViewportScale" value="true" />

Чтобы избежать отображения содержимого веб-сайта на фоне строки состояния, существуют плагины для cordova, такие как «cordova-plugin-statusbar», которые должны добавлять функциональные возможности для изменения поведения строки состояния.К сожалению, я пока не нашел работающий плагин, особенно работающий с iOS 12.