一、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'))