适配iphoneX等机型底部安全区域

1. 在meta标签中设置 viewport-fit=cover　　

   <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

2. 利用css获取安全区域
   1. safe-area-inset-top 顶部
   2. safe-area-inset-left 左边
   3. safe-area-inset-right 右边
   4. safe-area-inset-bottom 底部
3. 需要使用env() 或 constant()函数取值

   .content{
       padding-bottom: 0; 
       padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
       padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
   }

4. 如果页面已经设置过内边距，可以使用calc()函数搞定

   .content{
       padding-bottom: 10px;
       padding-bottom: calc(10px + constant(safe-area-inset-bottom));
       padding-bottom: calc(10px + env(safe-area-inset-bottom));
   }

5. env()可以写第二个参数，如果环境变量不可用，该参数可让您设置备用值

   .content{
       padding-bottom: env(safe-area-inset-bottom, 30px);
   }

   *注：最初使用媒体查询进行安全区域适配，经过查阅vant的安全区域适配方案，及各路大神的方案进行整理。