Ioni c 4 & Angular 8 PWA - Скрыть нижний колонтитул в Android браузерах - PullRequest
Новая
       45

Ioni c 4 & Angular 8 PWA - Скрыть нижний колонтитул в Android браузерах

0 голосов
/ 26 февраля 2020

Я создаю PWA с Angular 8 и Ioni c 4. Я использую 'ion-fab', но в браузерах Android клавиатура выдвигает компонент.

Я видел, что в Ioni c Native вы можете управлять клавиатурой с помощью Cordova ( Hide Footer, когда клавиатура открыта 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>

1 Ответ

0 голосов
/ 26 февраля 2020

К сожалению, нет способа избежать изменения размера окна просмотра на Android при открытой клавиатуре, даже реализуя плагин @ionic-native/keyboard в отдельном приложении. Таким образом, вам нужно будет обойти это, есть пара вариантов, которые вы можете выбрать:

  • Когда клавиатура открывает / закрывает событие resize, запускается. Вы можете использовать его для процедурного применения изменений, однако это событие также инициируется другими действиями.

  • Используйте CSS медиазапросов, чтобы скрыть некоторые компоненты, когда body высота меньше ожидаемой.

  • Получите окно 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" />
...