Javascript - Android屏幕键盘更改背景大小

Question

我目前正在尝试使用bootstrap开发一个Angular应用程序，并且背景有一些问题。键盘打开时，背景调整大小。当更改为密码字段时，键盘的数字行出现并触发另一个调整大小。看起来图片是“跳跃”有没有办法阻止背景调整大小？

以下是表单的代码：

 <div class="col-sm-6 mx-auto my-auto">
  <div class="card card-block">
    <div class=""><h1 class="text-center">Anmelden</h1></div>

    <form #f="ngForm" role="form" (ngSubmit)="login(f)">
      <div class="form-group">
        <label for="username">Username</label>
        <input type="email"
               #name="ngModel"
               name="username"
               class="form-control input small"
               id="username"
               required
               placeholder="Username" email>
      </div>
      <div *ngIf="((!name.valid || name.pristine) && isSubmitted == true)" class="alert alert-danger">Email ist nicht gültig</div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" ngModel name="password" required #password class="form-control" id="password" placeholder="Password">
      </div>
      <div class="form-group" >
        <button type="submit" class="btn btn-default">Submit</button>
        <a [routerLink]="['/register']">Noch kein Konto? Hier klicken zum registrieren!<br></a>
      </div>
      <div [ngBusy]="{busy: busy, message: 'Bitte warten...'}"></div>
      <div *ngIf="!success" class="alert alert-danger">Passwort und/oder E-Mail falsch!</div>
      <p>{{ f.valid ? 'VALID':'Invalid' }}</p>


    </form>
  </div>
</div>

html, body {


  height: 100%;

}

body {
  background: url(assets/road-clouds-street-path.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100%;
  overflow-x:hidden;

}

我已经尝试过在这个onResize函数中设置身高

  function onResize() {
  console.log(window.outerHeight);
  var m = document.getElementById("taxi"), c = m.style;
  c.height = window.outerHeight;

}

但似乎是linke window.outerheight也会改变，因此没有效果。

JsFiddle示例：

https://jsfiddle.net/2a0t6816/