h5兼容苹果系统安全区域（小黑条）问题有时候在苹果系统上会遇到顶部或底部菜单栏遮盖了内容区域的部分内容这时候的解决方法

有时候在苹果系统上会遇到顶部或底部菜单栏遮盖了内容区域的部分内容

这时候的解决方法为

在head内加入此行，主要为"viewport-fit=cover"

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

添加css样式

@supports (bottom: env(safe-area-inset-bottom)) {
 
  body,.iphonex{
 
      padding-bottom: env(safe-area-inset-bottom);
 
      padding-bottom: constant(safe-area-inset-bottom);
 
  }
 
}

或者使用

@supports (bottom: env(safe-area-inset-bottom)) {  
    body,.iphonex{  
        padding-bottom: env(safe-area-inset-bottom);  
        padding-bottom: constant(safe-area-inset-bottom);  
    }  
}

完成！希望能帮到你.