No terminal móvel, o disco do software do telefone móvel elimina o problema de compactação da imagem de fundo (auto-adaptação da imagem de fundo)

Coloque o produto acabado primeiro

O motivo do problema:

(1) Há um problema com o uso de rótulos

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

as consequências

A imagem não pode ser adaptada a várias telas e o tamanho da imagem não pode ser controlado por largura: 100%; altura: 100%; propriedades.

(2), use largura: 100%; altura: 100% no estilo css; atributo para controlar o tamanho da imagem de fundo

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

as consequências

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

solução final

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

Em resumo, a imagem de fundo é autoadaptável e o teclado virtual é levantado para resolver o problema

(3), o Vue é resolvido da mesma forma (mude dinamicamente o valor da altura em Estilo e monitores montados a altura da página)

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