背景图像调整大小改变了android中的视图

Question

我正在开发一个 ionic3 应用程序。一切都很棒，除了在输入中使用键盘或输入聚焦时，背景图像会调整大小，这会使视图变得可怕。我用谷歌搜索了很多，我在论坛中发现了以下问题。不幸的是，它们在 ionic3 中对我不起作用。

image resize in ionic。 image resize in ionic 现在我将提供一些代码。

<ion-header>
  <ion-navbar>
    <ion-title>
      ورود به حساب
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="login">
    <div class="login-form">
      <ion-grid>
        <ion-row>
          <ion-col col-sm-12>
            <ion-list inset>
              <ion-item>
                <ion-label ionitron-bot>
                  <ion-icon name="person"></ion-icon>
                </ion-label>
                <ion-input
                  [(ngModel)]="phone"
                  type="tel"
                  placeholder="794737444"
                ></ion-input>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-sm-12></ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</ion-content>
**

Scss 样式代码。

page-new-user {
    ion-content{
        height: 100%;
    }
  div.login {
    width: 100%;
    height: 100%;
    background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    height: 100%;
    div.login-form {
      width: 50%;
      height: auto;
      margin: auto;
      background-color: #ddd;
    }
  }
}

现在我将提供应用程序的屏幕截图。

before focus after focus

Answer 1

 ion-content{
        height: 100%;
        .scroll-content{
            padding-bottom: 0px !important;
        }
    }
  div.login {
    width: 100%;
    height: 100%;
    background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    height: 100%;
    div.login-form {
      width: 50%;
      height: auto;
      margin: auto;
      background-color: #ddd;
    }
  }

应该修复这个 .scroll-content{padding-bottom: 0px !important;} 添加到 ion-content 阻止 ion-scoll 组件更改其填充。