1. 如果想全屏覆蓋，html裡面請使用

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

ps:我的實際專案裡，只在手機qq 裡面去訪問頁面時候 出現底部灰色安全區域塊，可以說現在大部分公司頁面都沒有做相容，包括百度，美團，京東...

so  html 加此屬性，網頁就可以全屏覆蓋。

2.如果想對某個元素進行底部上移或者頂部下移可以做以下適配。

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

/*
 *  iphoneX pulic  css

@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);
   }

}

3.js 方法，有些介面必須用js 去處理，不能用css樣式實現，那麼就可以這樣做

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

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

ps: 寫在後面

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

//這是我整理的方法，只對個人專案的相容，僅供參考。