Кордова приложение не отображается правильно на iPhone X (симулятор)

для ручного исправления существующего проекта cordova

черные полосы

добавьте это в ваш информация.файл plist. Исправление образа запуска-это отдельная проблема, т. е. как добавить изображение запуска iPhoneX

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

белые полосы

Set viewport-fit=обложка в метатеге

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

есть 3 шага, которые вы должны сделать

для iOs 11 строка состояния и проблемы с заголовком iPhone X

---

1. Видовой экран подходит крышка

добавить viewport-fit=cover мета тега в <header>

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

Demo: https://jsfiddle.net/gq5pt509 (Индекс.html)

---

1. добавить больше изображений заставок на config.xml внутри <platform name="ios">

не пропустите этот шаг, это требуется для получения настройки экрана на iPhone X работа

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

Demo:https://jsfiddle.net/mmy885q4 (config.xml)

---

1. исправьте свой стиль на CSS

использовать safe-area-inset-left,safe-area-inset-right,safe-area-inset-top или safe-area-inset-bottom

пример: (использовать в случае!)

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);

   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

---

бонус: вы можете добавить класс тело, как is-android или is-ios on deviceready

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

так что вы можете сделать что-то вроде этого на CSS

.is-ios #header {
 // Properties
}

просто обратите внимание, что constant использование ключевых слов для безопасного-площадь поля была обновлена до env для 11.2 бета+

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

в моем случае, когда каждый экран-заставка был индивидуально разработан вместо автогенерации или выложен в формате раскадровки, мне пришлось придерживаться моей устаревшей конфигурации экрана запуска и добавлять портретные и ландшафтные изображения для целевой ориентации iPhoneX 1125×2436 в конфигурацию.xml вот так:

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

после добавления их в конфиг.xml ("viewport-fit=cover" уже был установлен в index.hml) мое приложение, построенное с помощью Ionic Pro, заполняет весь экран на устройствах iPhoneX.

Если вы устанавливаете новые версии ionic глобально, вы можете запустить ionic cordova resources и он будет генерировать все изображения splashscreen для вас вместе с правильными размерами.

обратите внимание, что эта статья: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd имеет разные размеры, чем выше и страница плагина cordova:

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

Я изменил размер изображения, как указано выше, и обновил ios платформы и cordova-plugin-splashscreen до последней и вспышка на белый экран после Второй проблемы была исправлена. Однако начальное изображение spash теперь имеет белую границу внизу.