IONIC 3 - Bottom Tab iPhone X UI проблемы

Question

Я столкнулся с проблемой с надрезом на iPhone X, и я решил только с помощью CSS.Однако у меня возникла проблема с этой вкладкой кнопки.Было бы хорошо, если бы я мог увеличить ширину кнопки до конца экрана или просто закрасить серую область белым.

ионный 3 Angular 4 xCode / Simulador: версия 10.1

Answer 1

Хорошо, поэтому я только что нашел способ справиться с этим:

Во-первых, вам нужно определить, что устройство является IphoneX примерно так: В вашем app.component инициализируйте переменную, которую вы храните вновый или существующий сервис, который обрабатывает глобальные настройки, например:

export class MyApp {
   //...
   constructor (
   //...
   private settingsService: SettingService
   ) {
   //...
   const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
    // Get the device pixel ratio
    const ratio = window.devicePixelRatio || 1;

    // Define the users device screen dimensions
    const screen = {
      width : window.screen.width * ratio,
      height : window.screen.height * ratio
    };

    // iPhone X Detection
    if (iOS && screen.width == 1125 && screen.height === 2436) {
      // Set a global variable now we've determined the iPhoneX is true
      this.settingsService.isIphoneX = true;
    }
   }
}

Приведенный выше код не мой, я не смог найти ссылку на оригинального автора.Он или она узнает себя.В любом случае, после того, как этот код будет работать, вы можете добавить следующее на странице, отображаемой в безопасной области .

Сначала объявите иерархию классов css в variables.scss

*.display-in-safe-area-iphonex{
   .scroll-content{
      margin-bottom:30px;
      margin-top: 40px;
   }
}

Затем добавьте этот settingService на нужную страницу и поместите этот ngClass в тег ion-content вашей страницы следующим образом:

<ion-content [ngClass]="{'display-in-safe-area-iphonex': settingService.isIphoneX}">
<!--    content            -->
</ion-content>

Я обнаружил, что 40px для верхней меткии 30px для нижней панели работают хорошо.