iphoneX的适配问题

iphoneX();
function iphoneX(){
var oMeta = document.createElement('meta');
oMeta.setAttribute('name',"viewport");
oMeta.setAttribute('content',"width=device-width,initial-scale=1.0,viewport-fit=cover");
document.getElementsByTagName('head')[0].appendChild(oMeta);
}

@media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 

   body{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }

   .iphonex-pt{
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
   }
   .iphonex-pb{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-mt{
      margin-top: constant(safe-area-inset-top);
      margin-top: env(safe-area-inset-top);
   }
   .iphonex-mb{
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-pl{
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
   }
   .iphonex-pr{
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
   }
   .iphonex-ml{
      margin-left: constant(safe-area-inset-left);
      margin-left: env(safe-area-inset-left);
   }
   .iphonex-mr{
      margin-right: constant(safe-area-inset-right);
      margin-right: env(safe-area-inset-right);
   }
   .iphonex-bd-top-bg{
      border-top: 88px solid transparent;
   }
   .iphonex-bd-top{
      border-top: 44px solid transparent;
   }
   .iphonex-bd-bottom{
      border-bottom: 34px solid transparent;
   }

}

3.js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){

        $(".phonex-pb").css("padding-bottom","34px");
}