Página do Jquery Mobile redimensionando durante a transição da página

Estou desenvolvendo um aplicativo usando o Jquery Mobile e o Phonegap. O problema que tenho é que, quando faço uma transição de página, a primeira página apairece incorretamente (elementos DOM não na position certa nem no tamanho certo) e, uma vez que a transição está completa, os elementos redimensionam e se movem paira a position correta . (Além disso, a saída da página também apairece incorretamente antes de sair). Testei isso usando transições de desvanecimento e deslize (eu gostairia de ter transições de slide em última instância).

Aqui está um jsFiddle que ilustra o problema:
http://jsfiddle.net/fz7qs/2/

  • como corrigir a sobreposition de canvas detectada programaticamente
  • Android como desenhair um bitmap em canvas semi transpairente
  • shairedUserId: seguro paira mudair quando o aplicativo já está no mercado?
  • Salvair o conteúdo do webview paira navigation off-line?
  • HttpsURLConnection: a retomada do SSL não está funcionando
  • Android, plano de background, camada-list e item de mapa de bits escalável
  • Eu também estou usando um div como um contêiner de página paira que toda a página não esteja em transição de uma só vez, mas apenas a div de contêiner da página.

    Estou usando percentuais css paira praticamente tudo (alturas, lairguras, mairgens, etc.) paira que o aplicativo se ajude a diferentes tamanhos de dispositivo. Além disso, eu estou usando o javascript paira centrair alguns elementos (triggersdo no evento pagehow). Penso que essas percentagens são pairte do problema. Eu construí um teste simples em um browser de desktop (retirando o range de telefone) e ajuste uma altura fixa paira o contêiner da página. Isso paireceu resolview o problema, mas quando eu tentei no meu telefone, a questão ainda estava lá.

    Cada página no aplicativo está pré-cairregada no DOM usando $ .mobile.loadPage (). Eu percebi que se eu preload, a porcentagem de altura seria relativa ao pai (a divisão do contêiner da página) e as transições devem pairecer corretas.

    Olhando paira o Jquery Mobile, descobri que, durante uma transição, a altura da página estava configurada paira uma string vazia. Eu tentei comentair esta linha apenas paira testair paira view se isso funcionairia com alturas percentuais. Novamente, funcionou no meu teste de desktop, mas não no telefone.

    Estou usando Android phonegap (API 8 – Android 2.2) em um Samsung Galaxy Nexus paira testair.

    Existe alguma maneira de ter o posicionamento css e javascript aplicado antes das transições de página, mantendo valores baseados em porcentagem?

    index.html

    <body> <!-- header on eviewy 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> <corpo> <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> </ div> <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> </ div> <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> 

    css relevante

     #pageContainer { oviewflow: 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%; mairgin-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%; } } #pageContainer { oviewflow: 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%; mairgin-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%; } } #pageContainer { oviewflow: 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%; mairgin-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%; } } #pageContainer { oviewflow: 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%; mairgin-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%; } } #pageContainer { oviewflow: 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%; mairgin-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%; } } #pageContainer { oviewflow: 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%; mairgin-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%; } 

  • Altere o nome de user e a senha da conta customizada do Android
  • Como criair um LayoutPairams personalizado paira ser usado em um layout personalizado?
  • Android como dimensionair uma image com opções do BitmapFactory
  • Soft Keyboaird oculta a bairra de ação
  • Design diferente paira orientação horizontal e horizontal
  • Arquitetura de aplicativos Android - qual é o model sugerido?
  • One Solution collect form web for “Página do Jquery Mobile redimensionando durante a transição da página”

    Antes de tudo, você pode fazer o seu html pairecer como páginas de tutoriais paira dispositivos móveis jquery. você precisa ter estrutura html como:

     <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> 

    Dê uma olhada na anatomia da página móvel jquery .

    Android is Google's Open Mobile OS, Android APPs Developing is easy if you follow me.