APIClound适配iphoneX

一、iPhone X启动图

  • 问题:未上传对应的iPhone X启动图或者启动图格式不正确,应用运行在iPhone X上面时上下将有大黑边,不能全屏运行。
  • 解决:进入控制台端设置,上传iPhone X启动图,图片尺寸为1125*2436。

二、顶部header

  • 问题:由于iPhone X顶部的特殊形状,状态栏高度不再是以前的20px,而是变成了44px,如果应用开启了沉浸式效果,那么页面顶部会被遮住部分。
  • 解决:找到api.js中的fixIos7Bar、fixStatusBar方法,用以下代码替换即可。
u.fixIos7Bar = function(el){
    return u.fixStatusBar(el);
};
u.fixStatusBar = function(el){
    if(!u.isElement(el)){
        console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element');
        return 0;
    }
    el.style.paddingTop = api.safeArea.top + 'px';
    return el.offsetHeight;
};

三、底部标签栏被遮挡

  • 问题:页面底部的标签栏也被虚拟home键遮挡住了部分。对于虚拟home键,可以通过openWin和setWinAttr方法的hideHomeIndicator参数来控制显示隐藏,这对于沉浸式体验较高的场景很有用(比如观看视频)。
  • 解决:而一般的页面通常的做法是避开虚拟home键,这里参考header的处理,我们在api.js中添加一个fixTabBar方法:
u.fixTabBar = function(el){
    if(!u.isElement(el)){
        console.warn('$api.fixTabBar Function need el param, el param must be DOM Element');
        return 0;
    }
    el.style.paddingBottom = api.safeArea.bottom + 'px';
    return el.offsetHeight;
}

然后在需要的地方进行调用:$api.fixTabBar($api.byId('footer'))

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容