On the mobile terminal, the mobile phone software disk lifts the background picture compression problem (background picture self-adaptation)

Put the finished product first

The reason for the problem:

(1) There is a problem with the use of labels

习惯情况下我将背景图片放在了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%;
}

the consequences

The picture cannot be adapted to various screens and the size of the picture cannot be controlled by width:100%; height: 100%; properties.

(2), use width: 100%; height: 100% in the css style; attribute to control the size of the background image

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

the consequences

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

final solution

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

In summary, the background image is self-adaptive, and the soft keyboard is raised to solve the problem

(3), Vue is solved in the same way (dynamically change the height value in Style, and mounted monitors the height of the page)

<标签 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
}