iPhoneX适配

:root {

   --safe-area-inset-top: 0;

   --safe-area-inset-bottom: 0;

}

@supports (width: constant(safe-area-inset-top)) {

   :root {

       --safe-area-inset-top: constant(safe-area-inset-top);

       --safe-area-inset-bottom: constant(safe-area-inset-bottom);

   }

}

@supports (width: env(safe-area-inset-top)) {

   :root {

       --safe-area-inset-top: env(safe-area-inset-top);

       --safe-area-inset-bottom: env(safe-area-inset-bottom);

   }

}  

//具体使用

#app {

   padding-top: var(--safe-area-inset-top);

   padding-bottom: var(--safe-area-inset-bottom);;

}

原文：https://www.cnblogs.com/tylz/p/12870174.html