android - 在 Ionic 4 Android 应用程序中打开键盘会将背景图像向上移动

Question

我在我的 AndroidManifest.xml 中尝试了两个选项

android:windowSoftInputMode="adjustResize" 和 android:windowSoftInputMode="adjustPan"

使用 adjust adjustResize，它会提升我的背景图像，使其看起来很垃圾。如果向下滚动，它还允许出现这个奇怪的白色部分。请参见第二张和第三张图片。

如果我使用 adjustPan，它看起来很棒并解决了问题，但在分辨率较低的设备上，输入被键盘隐藏，用户无法访问它们，因为无法滚动。

理想情况下，我希望背景图像像 adjustPan 一样工作，但输入/其他内容像 adjustResize 一样工作。

也可以动态更改此设置，例如取决于你在哪个页面？

编辑添加的代码:

    <ion-content no-bounce has-bouncing="false" forceOverscroll="false">
      <div class="content">
        <div>
          <ion-img src="./../../../assets/img/branding/logo.png"></ion-img>
        </div>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
          <ion-grid>
            <ion-row class="row-padding-one"></ion-row>
            <ion-row>
              <ion-col size-sm="6" offset-sm="3" class="input-col">
                <ion-item class="custom-item" lines="none">
                  <ion-input 
                    class="login-input"
                    type="text"
                    formControlName="email"
                    [formControl]="loginForm.controls['email']"
                    placeholder="E-Mail"
                    required>
                  </ion-input>
                  <div *ngFor="let validation of loginValidationMessages.email">
                    <div class="error-message"
                     *ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
                      {{validation.message}}</div>
                  </div>
                </ion-item>
...


.content {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
  background-size: cover !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left;
}

Answer 1

尝试为该页面的 ionic 内容放置背景图像。 这将解决问题!