PhoneGap разрывает страницы jQuery Mobile при перезагрузке - снова посещая ту же страницу

Question

Я работал над проектом, используя PhoneGap и jQuery Mobile. Моя установка использует несколько страниц в одном HTML-файле.

Я столкнулся с проблемой, и я не нашел ничего похожего:

Когда я снова посещаю страницу, а это значит, что я посетил ее, затем перешел на другую страницу и теперь вернулся на первую страницу, между верхним колонтитулом и содержимым, а также между нижним колонтитулом и содержимым страницы наблюдается некоторое отступление.

Как показано на скриншотах ниже:

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

Ниже вы можете видеть добавленный отступ, красный фон, когда вы вернетесь к странице выше впоследствии (это происходит с каждой страницей)

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

Код очень велик для размещения здесь, поэтому, если у кого-то есть предложения, пожалуйста, скажите мне, как это исправить или где искать проблему.

Следует отметить, что проблема существует, только если приложение работает на планшетах Android, а не при просмотре через браузер на моем ноутбуке.

Спасибо

Answer 1

Вы можете установить правильную высоту содержимого с помощью этой функции:

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;
}

Он должен быть активирован во время события pagehow, потому что только в этой точке верна высота страницы:

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

Рабочий пример: http://jsfiddle.net/Gajotres/nVs9J/

Если вы хотите узнать больше об этой функции, прочитайте мою другую статью: /questions/42228168/jquery-mobile-uluchshenie-razmetki-dinamicheski-dobavlyaemogo-kontenta/42228176#42228176