Я знайшов рішення білих барів тут :
Встановіть тег 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для заміни застарілих запуску зображень, використовуваних Кордової за замовчуванням. Для цього додайте до платформи 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 пікселів через "виїмку", що означає, що будь-який вміст у дальній частині вашої програми Кордова буде затьмарений нею :
Замість того, щоб жорстко кодувати прокладку в пікселях, ви можете це обробляти автоматично в 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);
}
Потім результат є бажаним: вміст програми охоплює весь екран, але не затьмарюється "виїмкою":
Я створив тестовий проект Кордова, який ілюструє вищезазначені кроки: 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-plugin-statusbar
- Розмір рядка стану змінився на 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://isissue.apache.org/jira/browse/CB-13273
