h5适配iphone x底部兼容？

了解基础知识

constant 函数包含以下属性

• safe-area-inset-left：安全区域距离左边界距离
• safe-area-inset-right：安全区域距离右边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

具体设置步骤如下：

1、要在html的head中设置：viewport-fit=cover

2、主要用到标签：

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

3、然后我们要设置相应的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，不然不生效，楼主呗坑过；