it-roy-ru.com

Размер экрана с iPhone на iPhone X

Я пытаюсь экспортировать мое приложение в ionic 3 . Но когда я запускаю в эмуляторе iPhone X, на экране появляются 2 пустых пробела сверху и снизу (проблема с экраном?).

Кто-нибудь поможет адаптировать разрешение к разрешению iPhone X?

3
Pako Navarro

Чтобы удалить эти пустые места, вы можете добавить viewport-fit=cover в ваш метатег:

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6
Ernesto Schiavo

Была такая же проблема с Titanium SDK. Проблема заключается в том, что вам нужно предоставить правильные стартовые экраны, адаптирующие новые размеры экрана:

  • Портрет: 1125x2436
  • Пейзаж: 2436x1125

Для Titanium это было решено путем настройки сценария сборки для обнаружения и упаковки экранов запуска, поэтому, вероятно, команда Ionic вскоре сделает нечто подобное!

Для нативного Xcode проблема может быть такой же, и ее можно решить, поместив правильные изображения в каталог активов:

 Xcode Asset Catalog for iPhone X

4
Hans Knöchel

Сначала добавьте viewport-fit=cover в метатег index.html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

затем плагин Statusbar PR был объединен. Пожалуйста, установите последнюю стабильную версию строки состояния Cordova.

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/Apache/cordova-plugin-statusbar.git

Затем добавьте этот CSS в ваш файл src/app/app.scss:

<style>
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: calc(44px + constant(safe-area-inset-top));
}


.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: constant(safe-area-inset-top);
}

div.tab-nav.tabs {
  height: calc(49px + constant(safe-area-inset-bottom));
}

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs {
  top: calc(64px + constant(safe-area-inset-top));
}
</style>

последний, добавьте заставку размером 1125 × 2436 для iphone X, укажите путь к нему в index.html 

<splash src="resources/ios/splash/[email protected]~iphone.png" width="1125" height="2436"/>
2
Jaydeep Kataria

Панель состояния плагина Cordova обновлена ​​для работы с iPhoneX в версии 2.3.0. Пожалуйста, проверьте заметки о выпуске

0
Prithivi Raj

Сначала добавьте viewport-fit = cover в метатег index.html.

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

Второй добавить плагин строки состояния

cordova плагин добавить Cordova-плагин-статусбар

добавить плагин Cordova https://github.com/Apache/cordova-plugin-statusbar.git

0
Piyush Sardhara

Добавьте правильные изображения для запуска iphone x Запустите изображение, добавив ссылку помощи

Затем следуйте этим

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

Проблема интерфейса

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

<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">

Дополнительная помощь

0
Haza