APICLOUD实现沉浸式导航栏在Android和ios上的兼容

最近在使用apicloud开发一款APP，项目没有使用安卓和ios开发人员，选择APICLOUD开发，犹豫UI设计的导航栏是沉浸式，在Android和ios上的效果是不一样的，ios上导航栏会浮在内容上面，将内容部分遮挡，如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOxizIFk-1604049698276)(/bbs/data/attachment/forum/201603/29/)]

我要达到的是不希望导航栏遮挡住内容部分，经过不懈的努力和各种尝试，终于解决了这个问题，具体步骤如下：
1、在config文件里面配置

  <preference name="statusBarAppearance" value="true"/>

2、通过判断手机类型给header添加padding-top

var systemType = ;  // 获取手机类型，比如： ios
  var header = ('#header');
  if(systemType=='ios'){//兼容ios和安卓
    $(header, 'headerIos');
  }else{
    $(header, 'headerAnd');
  }
  ({
    color: '#0063ff',//设置APP状态栏背景色
    style: 'light'
  });

css代码：（由于Android和ios的状态栏高度不同）

//其中，IOS状态栏高度为20px，Android为25px
/*兼容ios和Android*/
.headerIos{
  padding-top: 20px;
}
.headerAnd{
  padding-top: -25px;
}

在对应页面执行步骤2的方法即可实现效果