iPhone安全区域 底部小黑条在H5的适配

在H5上的解决方案

使用苹果官方推出的适配方案Css函数env()和constant(）

1. 设置viewport设置为cover，这样这两个函数才能生效

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

2. 用@support隔离兼容样式，当浏览器支持bottom: constant(safe-area-inset-bottom)或者bottom: env(safe-area-inset-bottom)的时候，bottom-button类就会新增margin-bottom的样式

   @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
       .bottom-button {
           margin-bottom: constant(safe-area-inset-bottom);
           margin-bottom: env(safe-area-inset-bottom);  
       }
   }
   

更多小程序以及H5的适配方案参考博文：https://www.jb51.net/html5/719525.html