h5适配iphone x底部兼容？

主要用到标签：

1 <div className="parent">
2    <header></header>
3    <div className="content"></div>
4    <footer></footer>
5 </div>

然后我们要设置相应的css样式：

 1 .parent{
 2       height:100vh;
 3 
 4       footer{
 5            background-color: #fff;
 6            position: fixed;
 7            bottom: 0;
 8            left: 0;
 9            right: 0;
10            
11           @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
12             padding-bottom: calc(constant(safe-area-inset-bottom) - 20px);
13             padding-bottom: calc(env(safe-area-inset-bottom) - 20px);
14          }
15     }              
16 }

注意为了是env，constant等样式兼容iphone生效必须设置当前dom标签的position:fixed，不然不生效，楼主呗坑过；

标签：constant,bottom,适配,safe,h5,area,inset,iphone,env
来源： https://www.cnblogs.com/cxyqts/p/13389417.html