移动端，手机软件盘抬起背景图片压缩问题(背景图片自适应)

先放效果成品

问题发生的原因：

(一)、使用标签有问题

习惯情况下我将背景图片放在了ion-content标签里

//背景图片直接放在了ion-content里
<ion-content class="loginBg" >   
    <div style="margin-top:55%;" >
      <div style="margin:0 auto;width:70%;" >
          <ion-item style="margin-top: 0.25rem; --background: transparent;">
            <ion-icon name="person" style="color: #8ab5e0;"></ion-icon>
            <ion-input style="margin-left: 1rem; color: #eef6ff;" type="text" mode="md" inputmode="text" placeholder="请输入账号" [(ngModel)]="user.UserName"></ion-input>
          </ion-item>
          <ion-item style="margin-top: 0.25rem;--background: transparent;">
            <ion-icon name="lock-closed" style="color: #8ab5e0;"></ion-icon>
            <ion-input style="margin-left: 1rem;color: #eef6ff;" type="password" mode="md" inputmode="password" placeholder="请输入密码" [(ngModel)]="user.Password"></ion-input>
          </ion-item>
      </div>
    </div>
    <ion-button  style="--background :#0047ad; margin-top: 3.5rem;" (click)="login()" class="loginButton">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  录</ion-button>
</ion-content>

.loginBg{
    
    
  --background: url('../../assets/image/bg1.png') center/ cover no-repeat;
 
}
.loginButton{
    
    
  width:62%;
  position:relative; 
  left:18%;
}

造成的后果

图片无法自适应各种屏幕及图片大小无法用width:100%;height：100%;属性控制大小。

(二)、css样式中用width:100%;height:100%；属性控制背景图片大小

<ion-content>
  <!--ion-content标签内嵌套div，此div里添加背景图片，可以用width或height控制图片大小-->
  <div class="bgBox" >
    <div style="margin-top:55%;" >
      <div style="margin:0 auto;width:70%;" >
          <ion-item style="margin-top: 0.25rem; --background: transparent;">
            <ion-icon name="person" style="color: #8ab5e0;"></ion-icon>
            <ion-input style="margin-left: 1rem; color: #eef6ff;" type="text" mode="md" inputmode="text" placeholder="请输入账号" [(ngModel)]="user.UserName"></ion-input>
          </ion-item>
          <ion-item style="margin-top: 0.25rem;--background: transparent;">
            <ion-icon name="lock-closed" style="color: #8ab5e0;"></ion-icon>
            <ion-input style="margin-left: 1rem;color: #eef6ff;" type="password" mode="md" inputmode="password" placeholder="请输入密码" [(ngModel)]="user.Password"></ion-input>
          </ion-item>
      </div>
    </div>
    <ion-button  style="--background :#0047ad; margin-top: 3.5rem;" (click)="login()" class="loginButton">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  录</ion-button>
  </div>
</ion-content>

//加入fixed弹性布局，自适应何种屏幕
.bgBox{
    
    
  position:fixed;
  width:100%;
  height:100%;
  background-image:url(../../assets/image/bg1.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

造成的后果

背景图片可以自适应手机或平板，但软键盘抬起，图片压缩问题还未解决(logo变形)

最终解决方法

height高度不再定死写100%，ts里动态获取页面的高度

<ion-content>
  <!-- 获取页面高度，动态改变height，高度不再定死写100% -->
  <div class="bgBox" [ngStyle]="{
     
     'height': bodyHeight + 'px'}">
    <div style="margin-top:55%;" >
      <div style="margin:0 auto;width:70%;" >
          <ion-item style="margin-top: 0.25rem; --background: transparent;">
            <ion-icon name="person" style="color: #8ab5e0;"></ion-icon>
            <ion-input style="margin-left: 1rem; color: #eef6ff;" type="text" mode="md" inputmode="text" placeholder="请输入账号" [(ngModel)]="user.UserName"></ion-input>
          </ion-item>
          <ion-item style="margin-top: 0.25rem;--background: transparent;">
            <ion-icon name="lock-closed" style="color: #8ab5e0;"></ion-icon>
            <ion-input style="margin-left: 1rem;color: #eef6ff;" type="password" mode="md" inputmode="password" placeholder="请输入密码" [(ngModel)]="user.Password"></ion-input>
          </ion-item>
      </div>
    </div>
    <ion-button  style="--background :#0047ad; margin-top: 3.5rem;" (click)="login()" class="loginButton">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  录</ion-button>
  </div>
</ion-content>

.bgBox{
    
    
  position: fixed;
  width:100%;
  // height:100%;    // 此行删除不能再css中定义背景图片容器的高度
  background-image:url(../../assets/image/bg1.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

此处我习惯写在ionic5生命周期ionViewWillEnter里，也可写在ngOnInit()等生命周期里

  //ts里记得提前声明
  export class LoginPage implements OnInit {
    
    
  		public bodyHeight: number;
  }
  ionViewWillEnter() {
    
    
    //获取当前页面的高度，这样在页面加载完成后高度就定死了，不会因为页面的高度变化导致背景图片压缩的问题。
    this.bodyHeight = document.documentElement.clientHeight;
    console.log(this.bodyHeight);
  }

综上背景图片自适应，及软键盘抬起完美解决

(三)、vue同理解决（动态更改Style里height值，mounted 监听页面高度）

<标签 id=“bgBox” :style="{height: bodyHeight + ‘px’}"></标签>

#bgBox{
    
    
width: 100%;
//height: 100%; //此行删除 不能再css中定义背景图片容器的高度
background: url("…/assets/loginBG.jpeg") no-repeat left top;
background-size: cover;
}

mounted () {
    
    
	this.bodyHeight = document.documentElement.clientHeight
}