Ios IONIC 3-底部选项卡iPhone X用户界面问题

我在iPhoneX上遇到了缺口问题，我只用CSS解决了这个问题。 但是，这个按钮选项卡有问题。 如果我能把按钮的宽度延长到屏幕的尽头，或者把灰色区域变成白色，那就太好了

离子3 角度4

---

xCode/Simulador:Version10.1

好的，所以我找到了一种方法来解决这个问题：

首先，您需要确定该设备是类似于iPhone的： 在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;
    }
   }
}

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

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

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

然后将该设置服务注入所需页面，并在页面的ion content标记中使用该ngClass，如下所示：

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

---

我发现40px用于上槽口，30px用于下栏效果很好。

您需要为web视图设置UIEdgeInsets，以便一直延伸到底部，覆盖槽口

您可以通过创建WKWebView的子类来实现这一点

---

检查！退出。

你的屏幕截图是你想要的吗？@Mehdi我想将页面延伸到屏幕的末尾，选项卡按钮仍然在同一个位置，但有点灰色的小部分完全是白色的。我没有找到用CSS给它上色的方法。