In developing H5 projects, it is sometimes necessary to judge the iPhone model and distinguish whether it is iPhone X or not. The implementation is as follows:

methods: {
 isIPhoneX() {
   let u = navigator.userAgent;
   let isIOS = !!u.match(/\(i[^;]+;( U;)?CPU.+Mac OS X/); 
   if (isIOS) {
     if (screen.height == 812 && screen.width == 375) {
       //is iphoneX
     } else {
       //not iphoneX
     }
   }
 }
}

Then set the element height dynamically according to ref, as follows:

methods: {
 isIPhoneX() {
    let u = navigator.userAgent;
    let isIOS = !!u.match(/\(i[^;]+;( U;)?CPU.+Mac OS X/); 
    if (isIOS) {
      if (screen.height == 812 && screen.width == 375) {
        //is iphoneX
        this.$refs.punchcontent.style.height = "calc(100vh - 114px)"
      } else {
        //not iphoneX
        this.$refs.punchcontent.style.height = "calc(100vh - 80px)"
      }
    }else{
      //android
      this.$refs.punchcontent.style.height = "calc(100vh - 80px)"
    }
  }
}

Note: when the
isIPhoneX() method is called, it needs to be invoked in the mounted method, otherwise the setting height is invalid (the first step is to get the DOM node).