ios - IONIC 3 - 底部标签 iPhone X UI 问题

Question

我遇到过 iPhone X 上的缺口问题，我只用 CSS 就解决了。但是，我在使用此按钮选项卡时遇到问题。如果我可以将按钮宽度扩展到屏幕末尾或者只是将灰色区域设为白色，那就太好了。

ionic 3 Angular 4xCode/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;
    }
   }
}

上面的代码不是我的，我找不到原作者的引用资料。他或她会认出自己。无论如何，一旦您运行了此代码，您就可以在 safe area 中显示的页面中添加以下内容.

首先在variables.scss中声明一个css类层次结构

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

然后将该 settingService 注入(inject)所需的页面并将此 ngClass 放置在您页面的 ion-content 标签中，如下所示:

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

我发现上槽口 40px 和底栏 30px 效果很好。