一、iPhone尺寸图

iPhone尺寸.png

微信H5.jpg

二、代码

<script>
export default {
    data(){
        return{
            clientHeight:'',
            isIphone5:true,
            isIphone6:false,
            isIphone7Plus:false,
            isIphoneX:false,
            isIphoneXsMax:false
        }
    },
    created(){
      // 获取浏览器可视区域高度
      this.clientHeight =   `${document.documentElement.clientHeight}`      
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
      if(this.clientHeight<554){
        this.isIphone5=true;
        this.isIphone6=false;
        this.isIphone7Plus=false;
        this.isIphoneX=false;
        this.isMate20Pro=false;
        this.isIphoneXsMax=false;
      }else if(this.clientHeight <623){
        this.isIphone5=false;
        this.isIphone6=true;
        this.isIphone7Plus=false;
        this.isIphoneX=false;
        this.isMate20Pro=false;
        this.isIphoneXsMax=false;
      }else if(this.clientHeight <641){
        this.isIphone5=false;
        this.isIphone6=false;
        this.isIphone7Plus=true;
        this.isIphoneX=false;
        this.isMate20Pro=false;
        this.isIphoneXsMax=false;
      }else if(this.clientHeight <672){
        this.isIphone5=false;
        this.isIphone6=false;
        this.isIphone7Plus=false;
        this.isIphoneX=true;
        this.isMate20Pro=false;
        this.isIphoneXsMax=false;  
      }else if(this.clientHeight <725){
        this.isIphone5=false;
        this.isIphone6=false;
        this.isIphone7Plus=false;
        this.isIphoneX=false;
        this.isMate20Pro=true;
        this.isIphoneXsMax=false;  
      }else{
        this.isIphone5=false;
        this.isIphone6=false;
        this.isIphone7Plus=false;
        this.isIphoneX=false;
        this.isMate20Pro=false;
        this.isIphoneXsMax=true;   
      }
    }
}
</script>
<style>
body,html{background-color: #3dc1b2;height: 100%;width: 100%;}
#app{height: 100%;}
.mint-toast-text{color: #fff;}
</style>

<style scoped>
.childIphone5{bottom: 2rem;}
.adultIphone5{bottom: .6rem;}
.childIphone6{bottom: 2.37rem;}
.adultIphone6{bottom: .86rem;}
.childIphone7Plus{bottom: 2.37rem;}
.adultIphone7Plus{bottom: .86rem;}
.childIphoneX{bottom: 3.4rem;}
.adultIphoneX{bottom: 1.68rem;}
.childMate20Pro{bottom: 3.88rem;}
.adultMate20Pro{bottom: 2.08rem;}
.childIphoneXsMax{bottom: 3.3rem;}
.adultIphoneXsMax{bottom: 1.5rem;}
</style>