Jquery MobileとPhonegapを使用してアプリケーションを開発しています。私が持っている問題は、ページの遷移を行うと、入ってくるページが最初に間違って表示され（DOM要素が正しい位置にも正しいサイズにもない）、移行が完了すると要素がサイズ変更されて正しい位置に移動する。 （また、移動する前にページ遷移が間違って表示されます）。私はフェードとスライドの両方の遷移を使ってこれをテストしました（私はスライド遷移を最終的に持っていたいと思います）。ここでJquery Mobileページの遷移中にページサイズを変更する
は、問題を示すjsFiddleです：
http://jsfiddle.net/fz7qs/2/
私はページ全体が一度に移行されないように、また、ページのコンテナとしてのdivを使用して、ちょうどページのコンテナのdivいます。
私はかなりのすべて（高さ、幅、余白など）にCSSのパーセンテージを使用しているため、アプリはさまざまなデバイスサイズに合わせて縮尺されます。また、私はいくつかの要素を中心にjavascriptを使用しています（pageshowイベントで発生）。私はこれらのパーセンテージが問題の一部だと思う。私はデスクトップブラウザ（phonegapを取り出して）で簡単なテストを構築し、ページコンテナに固定された高さを設定しました。これは問題を解決するように見えましたが、私が電話で試してみたところ、問題はまだ残っていました。
アプリの各ページは、$ .mobile.loadPage（）を使用してDOMにプリロードされています。私がそれらをプリロードすると、高さのパーセンテージは親（ページコンテナdiv）に相対的であり、トランジションは正しく見えるはずです。
さらにJquery Mobileを調べると、遷移中にページの高さが空の文字列に設定されていることがわかりました。私はちょうどパーセンテージの高さで動作するかどうかをテストするために、この行をコメントアウトしようとしました。再び、デスクトップテストでは機能しましたが、電話では機能しませんでした。
私は、Samsung Galaxy NexusでAndroid phonegap（APIレベル8 - Android 2.2）を使用してテストしています。
パーセンテージベースの値を維持しながらページ遷移前にCSSとJavaScriptの位置付けを適用する方法はありますか？
index.htmlを
<body>
<!-- header on every page -->
<div id="mainHeader">This is a header</div>
<!-- page content -->
<div id="pageContainer">
<div data-role="page"></div>
</div>
</body>
page1.html
<body>
<div data-role="page" id="page1">
<div class="subheader">
<div class="backButton"></div>
<div class="subheaderText">Settings</div>
<div class="helpButton"></div>
</div>
</div>
</body>
あなたのhtmlを作ることができるすべての
#pageContainer {
overflow: hidden;
width: 100%;
height: 86.772486772486772486772486772487%;
}
.ui-mobile [data-role="page"] {
min-height: 0px !important;
color: white;
position: relative;
width: 100%;
height: 100%;
background: #868a73;
}
.subheader {
width: 100%;
height: 10.16260162601626016260162601626%;
background-color: #000;
display: inline-block;
text-align: center;
position: relative;
}
.backButton {
background: url("images/back_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 8.888888888888888888888888888889%;
height: 52%;
margin-left: 5.555555555555555555555555555556%;
}
.subheaderText {
color: #FFF;
font-size: 2.45em;
font-weight: bold;
display: inline-block;
}
.helpButton {
float: right;
background: url("images/help_button.png");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 8.888888888888888888888888888889%;
height: 64%;
right: 5.555555555555555555555555555556%;
}