JS Mobile Page to determine whether it is iPhone X, and then set the corresponding height of the element?

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).