【示例】iphonex顶部安全区域适配

分类：HTML5+

在iphoneX上，由于安全区域的存在，窗口顶部的一部分内容会被遮挡。
下面给出5+App的一些适配方案

native处理

配置titleNView

webview配置了titleNView，那么native层会自动调整系统状态栏区域的内容。

无titleNView

webview如果没有配置titleNView，则可以选择补充statusbar的配置。同样，native层会处理状态栏以及安全区域。

注意：以上两种方案，均是交给native层来处理状态栏部分的高度，与一般的沉浸式应用适配是一致的。参考文档 html5plus应用实现沉浸式状态栏
另外，首页比较特殊，需要在manifest.json中配置。

不依赖native

参考网上分享的 iPhone X的缺口和CSS 方案，做了一个简单的示例，效果见图。

示例

head部分

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

css部分

.main {  
  background-color: #ff0000;  
  padding-top: 20px;  
  padding-top: constant(safe-area-inset-top);  
}  

.mui-bar.mui-bar-nav {  
  background-color: #ff0000;  
  box-shadow: none;  
  top: 20px;  
  top: constant(safe-area-inset-top);  
}  

.mui-bar.mui-bar-nav .mui-title {  
  color: #FFFFFF;  
}