Ionic 4 & Angular 8 PWA - 在 Android 浏览器中隐藏页脚答案

【问题标题】：Ionic 4 & Angular 8 PWA - Hide the footer in Android browsersIonic 4 & Angular 8 PWA - 在 Android 浏览器中隐藏页脚
【发布时间】：2020-02-27 01:44:45
【问题描述】：

我正在使用 Angular 8 和 Ionic 4 创建 PWA。我正在使用 'ion-fab' ，但在 Android 浏览器中，键盘会推动组件。

我已经看到，在 Ionic Native 中，您可以使用 Cordova (Hide Footer When keyboard is opened ionic4) 管理键盘控制，但我需要它用于 PWA。有什么解决办法吗？

<ion-content>
</ion-content>
<ion-footer>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
   <ion-fab-button>
     <ion-icon name="add"></ion-icon>
   </ion-fab-button>
  </ion-fab>
</ion-footer>

【问题讨论】：

标签： ionic-framework ionic4 angular8 progressive-web-apps

【解决方案1】：

不幸的是，在打开键盘时无法避免在 Android 上调整视口大小，即使在独立应用上实现 @ionic-native/keyboard 插件也是如此。所以你需要解决这个问题，你可以选择几个选项：

当键盘打开/关闭时，resize 事件被触发。您可以使用它以程序方式应用更改，但是，此事件也由其他操作触发。
当body 的高度低于预期时，利用 CSS 媒体查询隐藏某些组件。
获取应用启动时的窗口innerHeight值，并设置body元素固定高度：

this.platform.ready().then(() => {
    document.body.style.height = `${window.innerHeight}px`;
}

还记得更新您的元标记以避免强制执行所需的视口行为：

<meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【讨论】：