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

问题描述

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

I have tried two options in my AndroidManifest.xml

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

使用adjust AdjustResize可以推高我的背景图像，使其看起来很垃圾.如果您向下滚动，它也允许此怪异的白色部分.参见第二张和第三张图片.

With adjust adjustResize it pushes up my background image so that it looks pretty rubbish. It also allows this weird white section if you scroll down. See the 2nd and 3rd image.

如果我使用adjustPan，它看起来不错，并且可以解决问题，但是在分辨率较低的设备上，输入被键盘隐藏了，由于无法滚动，因此用户无法进入它们.

If I use adjustPan it looks great and fixes the problem but on devices with lower resolution inputs are hidden by the keyboard and users can't get to them as scrolling is not possible.

理想情况下，我希望背景图像像adjustPan，但输入/其他内容像adjustResize.

还可以动态更改此设置，例如取决于您是哪一页?

Also is it possible to change this setting dynamically e.g. depending on which page you are one?

编辑添加的代码:

    <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;
}

推荐答案

您可以这样做:

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

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

it will resize your inputs and other content but your Image always will be 100%;

这篇关于在Ionic 4 Android应用程序中打开键盘可将背景图像向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！