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