javascript - 在 Ionic 2 中检测 Android 软导航栏高度

Question

在我的 Ionic 2 应用程序中，我有一个带有垂直滚动元素的网格组件。

问题在于，在具有软导航栏(包含在屏幕中)的 Android 设备中，滚动会在整个内容显示之前停止(请参见屏幕底部)。

Android Nexus 5 的屏幕截图示例(带有软底导航栏):

iPhone 7 的屏幕截图示例(没有软底导航栏):

我的问题是:如何检测软导航栏的高度(如果存在)，以便将其添加到网格的底部填充？

Answer 1

添加 Paul 的答案，以防其他人遇到此问题:

您可以使用原始答案获取软导航栏的高度，然后将其作为 CSS 变量注入(inject)并直接在您的样式中使用:

  ngOnInit(){

    this.platform.ready().then(() => {
      this.checkSoftButton();
    });
  }


  private checkSoftButton(){
    const softButton=(screen.height - this.platform.height());
    const body:any=document.querySelectorAll('body');
    body.forEach((e:any)=>{
      e.classList.add('soft-button');
      e.style= '--ion-soft-button:' + softButton + 'px';
    });
  }

您可以在第一个组件中执行此操作一次，然后在您的样式中使用它，例如

  height:calc(100% - var(--ion-soft-button));

或

  height:calc(100vh - var(--ion-soft-button));

您甚至可以使用添加到主体的软按钮类，以防您需要在应用程序内执行其他操作(如果有软按钮)。