h5兼容苹果系统安全区域(小黑条)问题

359 阅读1分钟

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

这时候的解决方法为

  1. 在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>
  1. 添加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-bottomenv(safe-area-inset-bottom);  
        padding-bottomconstant(safe-area-inset-bottom);  
    }  
}

完成!希望能帮到你.