Безопасные области Ionic iPhone X не работают должным образом

Я пытаюсь поместиться между верхней панелью инструментов и нижней областью вкладок. И мне нужно, чтобы он работал на iPhone 5-X и iOS 10-11. Если игнорировать iOS10, то проблем нет, но мне нужны и старые версии для работы. Вот мой CSS. «margin-top» выдает ошибку с iOS 10. Если я использую «padding-top», то он не работает на iPhone X. Это обложка LoadingController, поэтому я не хочу программно разбирать его с JS на HTML (и, честно говоря, не знаю, как получить доступ к HTML для загрузки контроллера). Я решил это программно для Карт Google, но мне было интересно, есть ли решение с помощью CSS? У меня есть все последние версии всего и WKWebView. Мой ионный вид ниже.

.loading-ios {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);

  background-color: white;
  opacity: 1 !important;
  position: absolute;
  top: 64px;
  bottom: 49px;
}

кли-пакеты:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

глобальные пакеты:

cordova (Cordova CLI) : 7.1.0

локальные пакеты:

@ionic/app-scripts : 1.3.12
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

Система:

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v8.9.3
npm        : 5.5.1 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

ionic-framework ionic3 css safearealayoutguide iphone-x
person Dimitri    schedule 31.12.2017    source источник

Ответы (1)


arrow_upward
8
arrow_downward 

  margin-top: 20px; /* Status bar height on iOS 10 */
  margin-top: constant(safe-area-inset-top); /* Status bar height on iOS 11.0 */
  margin-top: env(safe-area-inset-top); /* Status bar height on iOS 11+ */

И уменьшите на 20 пикселей верхнее/нижнее перемещение соответственно.

person Dimitri    schedule 01.01.2018
comment
Куда писать этот CSS? - person zulkarnain shah; 23.02.2021