Android 在爱奥尼亚4安卓应用程序中打开键盘会将背景图像上移

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

android:windowSoftInputMode=“adjustResize”

和

android:windowSoftInputMode=“adjustPan”

随着调整大小，它推上了我的背景图像，使它看起来很垃圾。如果你向下滚动，它也允许这个奇怪的白色部分。请参见第二张和第三张图片

如果我使用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;
}

{{validation.message}
...
.内容{
宽度：100%；
身高：100%；
填充：0；
位置：相对位置；
背景：url（“../../../../assets/img/login bg.jpg”）无重复固定中心；
背景尺寸：封面！重要；
背景附件：固定；
背景重复：无重复；
背景位置：左；
}

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

您可以这样做：

ion-content{
    --background: url('../../assets/imgs/background-image.png') 0 0/100% 100% no-repeat;
}

它将调整您的输入和其他内容的大小，但您的图像始终为100%

将css添加到

.scroll-content {
  padding-bottom:0!important;
}

这是一个众所周知的问题

更多信息

---

你的布局是什么？用代码更新了问题。而且它是离子4。不幸的是，这似乎不起作用。我已经更新了我的问题，以说明离子4，可能是吗？太好了。这解决了空白问题。图像仍然向上移动，但这并不理想，因为在另一页中，我根据特定点背景图像的黑暗程度为半透明字体上色。此解决方案实际上压缩了背景图像。我用这个把它往上推，但没有压缩它。最差的选择。理想情况下，它会留在键盘下，不会移动。离子内容{--background:url（“../../../../../assets/img/login bg.jpg”）无重复固定中心；填充：0；}很好。这解决了空白问题。图像仍然向上移动，但这并不理想，因为在另一页上，我根据特定点背景图像的黑暗程度为半透明字体上色。