防止键盘调整Ionic 4中iOS / Android上的视图大小

Question

我有一个背景图像，我想全屏显示，底部有一个输入部分。当输入聚焦后，键盘出现并缩小图像以适合屏幕。我想要的是图像在不调整大小的情况下将整个div推高。

我尝试了很多事情，但是我目前的尝试如下：

.background{
url('assets/background.png') center center fixed;
height: 100%;
width: 100%;
}
.input-area{
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
}

<div class="background">
  <div class="input-area">
    //textboxes
  </div>
</div>

这似乎应该很容易完成，但无法获得预期的结果。任何输入将不胜感激，谢谢。

ionic cli 4.12.0
@ionic/angular 4.4.0
@ionic-native 5.5.1
node v10.15.2
npm 6.4.1
cordova 8.1.2 (cordova-lib@8.1.1)

Answer 1

这是我设法做到的方式：

1. 我在html文件的ion-content和ion-toolbar中添加了一个ID，以在我的打字稿文件中引用它们

...
<ion-content #content >
...
<ion-toolbar #toolbar color="light">
  <ion-input #input >...
...

1. 在我的打字稿中，我用ViewChild引用了它们，并在构造函数中添加了这样的功能

...
@ViewChild('content', {read: ElementRef}) contentRef: ElementRef;
@ViewChild('toolbar', {read: ElementRef}) toolbarRef: ElementRef;
...
  private startkeyboardAnimationTimestamp = 0;
  private endkeyboardAnimationTimestamp = 0.3;
  private keyboardAnimationDuration = 0.3;
...
constructor(private renderer: Renderer2) {

    if (this.platform.is('capacitor')) {

      window.addEventListener('keyboardWillShow', (e) => {
        this.startkeyboardAnimationTimestamp = Date.now();
        this.keyboardHeight = (<any>e).keyboardHeight;
        this.renderer.setStyle(this.contentRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
        this.renderer.setStyle(this.contentRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`); 
        this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform', `translate3d(0, ${-this.keyboardHeight}px, 0)`);
        this.renderer.setStyle(this.toolbarRef.nativeElement, 'transition', `${this.keyboardAnimationDuration}s ease-in-out`);

     window.addEventListener('keyboardDidShow', (e) => {
        this.endkeyboardAnimationTimestamp = Date.now();
      });

    window.addEventListener('keyboardWillHide', () => {
           this.renderer.setStyle(this.contentRef.nativeElement, 'transform', 
    `translate3d(0, 0px, 0)`);
           this.renderer.setStyle(this.toolbarRef.nativeElement, 'transform', 
    `translate3d(0, 0px, 0)`);
          });
...

**至于keyboardAnimationDuration，我将其默认设置为0.3s，并在第一次显示和隐藏后对其进行更新。

Answer 2

这对我有用：

在AndroidManifest.xml

android:windowSoftInputMode="adjustResize"

在scss中：

ion-content{
  --background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
  padding: 0;
}