appcan打包后产生的问题总结

以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的父元素或祖先元素。