以appcan为基础的项目,最终需要打包后进行调试。在调试过程中,主要的样式问题在苹果手机上,下面将这些问题总结起来,以防下次再犯。
1:ios 7 以上的手机中,状态栏与内容重叠:
问题描述:在ios7 系统以上的手机中,我们会发现状态栏的距离很小,导致与内容页重叠。而低版本的ios系统手机不会出现这种问题,安卓手机上都不会产生这种问题,所以我们需要在js中判断设备的类型,然后给状态栏添加距离。
解决方法:我们在js中添加以下代码,并在css中添加如下样式:
//ios状态栏适配
window.uexOnload = function(type){
var ios7style=uexWidgetOne.iOS7Style;
var isFullScreen = uexWidgetOne.isFullScreen;
if (ios7style == '1' && isFullScreen != '1') {
$("body").addClass("uh_ios7");
}
}
.uh_ios7 .uh,.uh_ios7{
padding: 2em 0 0;
}
2:设置苹果手的状态栏颜色
在页面中,我们只需要给body添加背景色,状态栏的背景色就会随body背景色相应的改变。
3:在有些苹果手机上图片不显示
可能原因:图片元素的父元素或者祖先元素的高度为0,导致不显示。
解决方法:直接删除高度为0的父元素或祖先元素。