Остановить изменение размера страницы во время перехода с помощью JQuery Mobile

Я создаю приложение phonegap, которое должно масштабироваться для всех разрешений, и таким образом определяю все в терминах процентов. Я также использую фиксированный заголовок с div, который я определил в JQuery как содержимое.

Проблема заключается в том, что во время перехода между страницами происходит "заикание", потому что высота страницы изменяется во время перехода. Я пытаюсь остановить это. Есть предположения?

Я создал образец ниже, чтобы действительно проиллюстрировать эту точку. http://jsfiddle.net/fz7qs/2/

<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <a id="page2link">To Page 2</a>

    <div data-role="content">    
        <p>Page content goes here.</p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="test2" style="height: 568px">

<div data-role="header">
    <h1>Page 2</h1>
</div>

<a id="page1link">To Page 1</a>

<div data-role="content" style="height: 50%;">
    <p style="height: 80%; border: 1px solid black;">This is page 2</p>        
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div>

Ответ 1

Вся страница jsFiddle перескакивает с самого первого посещения браузера браузера Chrome, поэтому перед загрузкой нажмите кнопку jsFiddle RUN.

РЕДАКТИРОВАТЬ: ответ и jsFiddle пересмотрены для изменений в разделе комментариев.

EDIT 2: jsFiddles теперь используют jQuery 1.7.2 с jQuery Mobile 1.2.0 для исправления ошибки браузера Chrome.

jsFiddle DEMO

Решение установить ваши стили в файле CSS, а не в разделе HTML, так как jQuery Mobile UI имеет собственные темы стиля через таблицу стилей.

Кроме того, у вас есть страница extra closing div внизу внизу этого HTML-кода, а также не закрывается веб-страница. Раздел заголовка в вашем HTML не нужен для jsFiddles, поскольку страница настроена для HTML5, и вам просто нужно импортировать файлы (мобильные jQuery) в jsFiddle с помощью кнопки Управление ресурсами.

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

Настройки CSS:

a {
 cursor: hand;
 cursor: pointer;    
}

.content1 {
  height: 268px;
}

.text1 {
  height: 50%;
  border: 1px solid black;
}

.content2 {
  height: 568px;
}

.text2 {
  height: 80%;
  border: 1px solid black;
}

В вашем разделе HTML я также привязал footer к нижней части страницы, используя data-position:

<div data-role="footer" data-position="fixed">

Кроме того, чтобы привязать footer к нижней части страницы, вы также можете отключить ее, добавив дополнительную настройку data-id для каждой страницы с тем же значением.

<div data-role="footer" data-id="foo" data-position="fixed">

jsFiddle FOOTER.

РЕДАКТИРОВАТЬ 2: За последнее обнаружение ошибки jQuery 1.8.2 и jQuery Mobile 1.2.0, обнаруженной в Chrome (скрытая полоса прокрутки по-прежнему вызывает переход элементов тела), здесь приведена пересмотренная Пример jsFiddle:

jsFiddle Процент, основанный на jQuery 1.7.2 и jQuery Mobile 1.2.0

Об этой ошибке:

Я только что обнаружил, что использование jsFiddle с jQuery 1.8.2 и jQuery Mobile 1.2.0 не работает должным образом, если для параметра overflow установлено значение hidden во время использование функции scrollBars в этом jsFiddle.

Эта функция заключается в том, чтобы скрыть полосы прокрутки браузеров во время анимации jQuery, не позволяя элементам быстро перемещаться в течение периода анимации страниц.

Полосы прокрутки браузеров на самом деле скрыты, но элементы в разделе тела продолжают "прыгать", как будто полосы прокрутки все еще присутствуют.

Этого не происходит, когда jsFiddle jQuery установлен в 1.7.2.

Если вам интересно, как иметь несколько страниц psuedo на одной странице, посмотрите jsFiddle для несвязанный SO Ответ здесь.

Ответ 2

Попробуйте изменить это:

<div data-role="content" style="height: 50%;">

:

<div data-role="content" style="height: auto;">

example: http://jsfiddle.net/fz7qs/13/