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