2013-05-10 117 views
1

我一直在使用的PhoneGap和jQuery Mobile的一個項目。我的設置在單個html文件中使用多個頁面。的PhoneGap打破jQuery Mobile的頁面加載時 - 訪問同一頁面再次

我面臨的一個問題,我還沒有發現任何地方任何類似:

當我再次訪問一個頁面,這意味着我訪問了它,然後導航到另一個頁面,現在回到第一頁,有是標題和內容之間以及頁腳和頁面內容之間的一些填充。

截屏如下顯示:

http://i.imgur.com/neBwZYx.png

下面你可以看到填充補充說,紅色的背景,當返回頁面上方之後(這種情況與每一頁)

http://i.imgur.com/u1whW9b.png

的代碼是非常大的,張貼在這裏,如果任何人有什麼建議,請告訴我如何解決這個問題或者到哪裏尋找問題。

應當注意的是,只有當應用程序在Android平板電腦上運行,而不是通過我的筆記本電腦瀏覽器中查看時存在問題。

謝謝

回答

0

您可以強制正確的內容高度使用此功能:

function getRealContentHeight() { 
    var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
    var viewport_height = $(window).height(); 

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
     content_height -= (content.outerHeight() - content.height()); 
    } 
    return content_height; 
} 

它必須在pageshow活動期間,因爲只有在這一點上的頁面高度激活是正確的:

$(document).on('pageshow', '#index', function(){  
    $.mobile.activePage.find('.ui-content').height(getRealContentHeight()); 
}); 

工作例如:http://jsfiddle.net/Gajotres/nVs9J/

如果您想了解更多關於此功能閱讀我的另一篇文章:https://stackoverflow.com/a/14550417/1848600

+0

我做同樣的事情,這就是爲什麼這是我在全屏幕放在第一位。當我第二次訪問該頁面時發生問題。正如你可以看到標題移動到屏幕的可見空間上方並在頁眉和頁腳之間添加空間。紅色的顏色你看到的是背景顏色的div保持整個頁面和淺灰色是在div#內容的背景顏色。 – 2013-05-10 09:05:44

相關問題