it-swarm.com.ru

Приложение Cordova некорректно отображается на iPhone X (Симулятор)

Вчера я тестировал свое приложение на базе Cordova на iPhone X Simulator в Xcode 9.0 (9A235), и оно не выглядело хорошо. Во-первых, вместо заполнения полноэкранной области, над и под контентом приложения была черная область .. И что еще хуже, между контентом приложения и черным были две белые полосы.

Добавление cordova-plugin-wkwebview-engine, чтобы Cordova отображал с помощью WKWebView (не UIWebView) исправляет белые полосы . Моим приложением не переносится из UIWebView в WKWebView из-за проблем с производительностью и утечкой памяти при использовании cordova-plugin-wkwebview-engine, возникающих при загрузке изображений, загруженных из Inapp Покупка размещенного контента в холст HTML5 (прямой доступ file:// через Webview невозможен из-за ограничений безопасности в WKWebView, поэтому данные изображения должны быть загружены через cordova-plugin-file).

На этих снимках экрана показано тестовое приложение с синим фоном, установленное на <body>. Выше и ниже UIWebView вы можете видеть белые полосы, но не с WKWebView:

Оба Cordova Webviews показывают черные области по сравнению с нативным приложением, которое заполняет всю область экрана:

96
DaveAlden

Я нашел решение белых полос здесь :

Установите viewport-fit=cover в тэге <meta> области просмотра, т.е.

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

Белые полосы в UIWebView исчезают:

Решение для удаления черных областей (предоставлено @dpogue в комментарии ниже) заключается в использовании LaunchStoryboard images с cordova-plugin-splashscreen для замены устаревших стартовых образов, используемых Cordova по умолчанию. Для этого добавьте следующее к платформе iOS в config.xml:

<platform name="ios">    
    <splash src="res/screen/ios/[email protected]~iphone~anyany.png" />
    <splash src="res/screen/ios/[email protected]~iphone~comany.png" />
    <splash src="res/screen/ios/[email protected]~iphone~comcom.png" />
    <splash src="res/screen/ios/[email protected]~iphone~anyany.png" />
    <splash src="res/screen/ios/[email protected]~iphone~anycom.png" />
    <splash src="res/screen/ios/[email protected]~iphone~comany.png" />
    <splash src="res/screen/ios/[email protected]~ipad~anyany.png" />
    <splash src="res/screen/ios/[email protected]~ipad~comany.png" />   

    <!-- more iOS config... -->
</platform>

Затем создайте изображения со следующими размерами в res/screen/ios (удалите все существующие):

[email protected]~iphone~anyany.png - 1334x1334
[email protected]~iphone~comany.png - 750x1334
[email protected]~iphone~comcom.png - 1334x750
[email protected]~iphone~anyany.png - 2208x2208
[email protected]~iphone~anycom.png - 2208x1242
[email protected]~iphone~comany.png - 1242x2208
[email protected]~ipad~anyany.png - 2732x2732
[email protected]~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
  • Майк Хартингтон создал этот запрос извлечения , который применяет необходимые изменения.
  • Это было объединено с выпуском [email protected], поэтому убедитесь, что вы используете хотя бы эту версию для применения к безопасным областям-вставкам

заставка

  • Ограничения раскадровки LaunchScreen изменились на iOS 11/iPhone X, что означало, что заставка «прыгает» при запуске при использовании существующих версий плагина ( см. Здесь ).
  • Это было зафиксировано в отчете об ошибке CB-13505 , исправлено PR cordova-ios # 354 и выпущено в [email protected] , поэтому убедитесь, что вы используете последнюю версию платформы cordova-ios.

ориентация устройства

  • При использовании UIWebView на iOS 11.0 поворот из портрета> пейзажа> портрета не приводит к повторному применению safe-area-inset, в результате чего содержимое снова становится скрытым (как отмечено в jms в комментарии ниже). 
  • Также происходит, если приложение запускается в альбомной ориентации, а затем поворачивается в портретную ориентацию.
  • Этого не происходит при использовании WKWebView через cordova-plugin-wkwebview-engine.
  • Радарный отчет: http://www.openradar.me/radar?id=5035192880201728
  • Update: похоже, это было исправлено в iOS 11.1

Для справки, это оригинальная проблема Cordova, которую я открыл, которая фиксирует это: https://issues.Apache.org/jira/browse/CB-13273

191
DaveAlden

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

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

Добавьте это в ваш файл info.plist. Исправление образа запуска является отдельной проблемой, т. Е. Как добавить iPhoneX Launch Image

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

Белые полосы

Установите viewport-fit = cover в метатеге

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

Есть 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">

Демо:https://jsfiddle.net/gq5pt509 (index.html)


  1. Добавьте дополнительные заставки к своему config.xml внутри <platform name="ios">

Не пропустите этот шаг, это необходимо для получения соответствия экрана для работы iPhone X

<splash src="your_path/[email protected]~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/[email protected]~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/[email protected]~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/[email protected]~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 1242x2208 -->

Демо: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, на deviceready

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

Так что вы можете сделать что-то подобное на CSS

.is-ios #header {
 // Properties
}
9
l2aelba

В моем случае, когда каждый заставочный экран разрабатывался индивидуально, а не создавался автоматически или выкладывался в формате раскадровки, мне приходилось придерживаться конфигурации экрана Legacy Launch и добавлять портретные и альбомные изображения для целевых ориентаций iPhoneX 1125 × 2436 в config.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" />

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

4
TaeKwonJoe

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

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

2
Brent

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

1
nebulr

Исправлена ​​проблема с поворотом экрана iPhone X/XS

На iPhone X/XS поворот экрана приведет к тому, что высота строки заголовка будет использовать неправильное значение, поскольку вычисление safe-area-inset- * не отражает новые значения во время обновления пользовательского интерфейса. Эта ошибка существует в UIWebView даже в последней версии iOS 12. Обходной путь - вставить верхнее поле в 1 пиксель, а затем быстро обратить его, что приведет к немедленному пересчету safe-area-inset- *. Исправление несколько уродливое, но оно работает, если вам по той или иной причине придется остаться с UIWebView.

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

Цель этого кода - заставить документ.body.style.marginTop немного измениться, а затем изменить его. Это не обязательно должно быть "1px". Вы можете выбрать значение, которое не вызывает мерцание вашего пользовательского интерфейса, но достигает своей цели.

0
YYL