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

Question

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

问题是，在带有软导航条(包括在屏幕中)的Android设备中，滚动会在显示全部内容之前停止(见屏幕底部)。

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

​

​

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

​

​

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

Answer 1

答案：

我们可以使用全局screen对象，以获得整个屏幕的尺寸，如果窗口(没有软导航条的高度)，则使用普通的platform.height()来获取尺寸。

样品法：

/**
   * On some Android devices there is a soft navigation bar,
   * which overlaps with the screen.
   * For that reason, we need to compute an extra space for
   * the drawer so that the items in the last
   * row are not shown "behind" the navigation bar
   * @returns {number} the difference in pixels.
   */
  getMarginBottomPropertyForDrawer() {
    const difference = screen.height - this.platform.height();
    return difference;
  }

Answer 2

如果其他人有这个问题的话，保罗的答案中还添加了以下内容：

您可以使用原始答案获取软导航栏的高度，然后将其作为CSS变量注入，并以您的风格直接使用它：

  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));

您甚至可以使用添加到身体中的软按钮类，如果有一个软按钮，您可能需要在应用程序中执行另一个操作。

Answer 3

尝试使用Cordova全屏插件或在配置文件中添加以下设置，

<preference name="Fullscreen" value="true" />