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

Question

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

我看到在 Ionic Native 中您可以使用 Cordova 管理键盘控制（），但我需要它用于 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>

Answer 1

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

当键盘 opens/close 触发 resize 事件。您可以利用它按程序应用更改，但是，此事件也会由其他操作触发。
当 body 高度低于预期时，使用 CSS 媒体查询隐藏一些组件。
获取应用启动时的windowinnerHeight值并设置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" />

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

Ionic 4 & Angular 8 PWA - Hide the footer in Android browsers

ionic-framework

progressive-web-apps

ionic4

angular8