Я нашел решение для белых полос здесь :
Устанавливается viewport-fit=coverв <meta>теге области просмотра , то есть:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
После этого белые полосы в UIWebView исчезнут:
Решение для удаления черных областей (предоставленное @dpogue в комментарии ниже) заключается в использовании изображений LaunchStoryboard с cordova-plugin-splashscreenзаменой устаревших изображений запуска, используемых Cordova по умолчанию. Для этого добавьте на платформу iOS следующее config.xml:
<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
<!-- more iOS config... -->
</platform>
Затем создайте изображения со следующими размерами res/screen/ios(удалите все существующие):
Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732
После удаления черных полос в iPhone X есть еще одна особенность, которую нужно решить: строка состояния больше 20 пикселей из-за «выемки», что означает, что любой контент в верхней части вашего приложения Cordova будет скрыт им. :
Вместо того, чтобы жестко кодировать отступы в пикселях, вы можете обрабатывать это автоматически в CSS, используя новые safe-area-inset-*константы в iOS 11.
Примечание: в iOS 11.0 была вызвана функция для обработки этих констант, constant()но в iOS 11.2 Apple переименовала ее в env()( см. Здесь ), поэтому, чтобы охватить оба случая, вам нужно перегрузить правило CSS обоими и полагаться на резервный механизм CSS для применения подходящий:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
Результат будет таким, каким вы хотели: содержимое приложения занимает весь экран, но не закрывается «выемкой»:
Я создал тестовый проект Cordova, который иллюстрирует вышеуказанные шаги: webview-test.zip
Ноты:
Кнопки нижнего колонтитула
- Если в вашем приложении есть кнопки нижнего колонтитула (как у меня), вам также необходимо применить их,
safe-area-inset-bottomчтобы избежать их перекрытия виртуальной кнопкой «Домой» на iPhone X.
- В моем случае я не мог применить это к,
<body>поскольку нижний колонтитул абсолютно позиционирован, поэтому мне нужно было применить его непосредственно к нижнему колонтитулу:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
Cordova-плагин-статусной
- Размер строки состояния изменился на iPhone X, поэтому старые версии
cordova-plugin-statusbarнекорректно отображаются на iPhone X
- Майк Хартингтон создал этот запрос на перенос, который применяет необходимые изменения.
- Это было объединено с
cordova-plugin-statusbar@2.3.0выпуском, поэтому убедитесь, что вы используете хотя бы эту версию для применения к вставкам безопасной области.
заставка
- Ограничения раскадровки LaunchScreen изменились в iOS 11 / iPhone X, что означает, что заставка "прыгала" при запуске при использовании существующих версий плагина ( см. Здесь ).
- Это было зафиксировано в отчете об ошибке CB-13505 , исправлено PR cordova-ios # 354 и выпущено
cordova-ios@4.5.4, поэтому убедитесь, что вы используете последнюю версию cordova-iosплатформы.
ориентация устройства
- При использовании UIWebView в iOS 11.0 поворот из портрета> пейзажа> портрета не приводит
safe-area-insetк повторному применению, в результате чего контент снова скрывается за выемкой (как выделено jms в комментарии ниже).
- Также происходит, если приложение запущено в альбомной ориентации, а затем повернуто в портретную.
- Этого не происходит при использовании WKWebView через
cordova-plugin-wkwebview-engine.
- Отчет радара: http://www.openradar.me/radar?id=5035192880201728
- Обновление : похоже, это было исправлено в iOS 11.1
Для справки, это исходная проблема Кордовы, которую я открыл, которая фиксирует это: https://issues.apache.org/jira/browse/CB-13273
