兼容IphoneX

兼容IphoneX的顯示，一般有兩種方法，一種通過css的media來做兼容，一種是通過js來做兼容。

一、我們先講CSS的方法，我們要做兩步即可：

1. 全屏覆蓋，html使用

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

2.通過對底部上移或者頂部下移進行處理

 注：如果想下面constant env 屬性有效果，請務必添加上面meta 標簽才能實現。

@media only screen and (device-width: 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;
   }
}

二、通過js來對IphoneX進行兼容

    通過判斷設配的寬度高度還有設備的像素是否是IphoneX

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
    $(".phonex-pb").css("padding-bottom","34px");
}

對於constant(safe-area-inset-bottom) 這樣的屬性完全可以不用寫在media 媒體查詢里面，上面只是做了公共樣式處理，safe-area-inset-bottom 意義其實相當於 底部34px。類似padding-bottom:34px;考慮其他兼容問題，多做了一個透明border 處理方法，僅僅是一種解決方式而已，其實都能實現。