모바일단말기에서 휴대폰 소프트웨어 디스크는 배경화면 압축문제를 해제(배경화면 자가적응)

완제품을 먼저 넣어

문제의 이유:

(1) 라벨 사용에 문제가 있다

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

결과

그림은 다양한 화면에 적용할 수 없으며 그림의 크기는 너비:100%, 높이:100%, 속성으로 제어할 수 없습니다.

(2) CSS 스타일에서 너비: 100%, 높이: 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);
  }

요약하면 배경 이미지가 자동 적응되고 소프트 키보드가 올라가서 문제가 해결됩니다.

(3) Vue도 같은 방법으로 해결(Style에서 높이 값을 동적으로 변경하고 마운트된 페이지의 높이를 모니터링)

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