Sto sviluppando un'applicazione utilizzando Jquery Mobile e PhoneGap. Il problema che ho è che quando eseguo una transizione di pagina, la pagina in entrata appare per la prima volta in modo non corretto (gli elementi DOM non sono nella giusta posizione né la giusta dimensione), quindi una volta completata la transizione, gli elementi vengono ridimensionati e spostati nella posizione corretta . (Inoltre, anche la pagina che passa fuori appare in modo errato prima che si sposti). Ho provato questo usando sia le transizioni di dissolvenza che quelle di scorrimento (mi piacerebbe avere transizioni di diapositive alla fine).Ridimensionamento della pagina Jquery Mobile durante la transizione delle pagine
Ecco un jsFiddle che illustra il problema:
http://jsfiddle.net/fz7qs/2/
Sono anche utilizzando un div come contenitore pagina in modo che l'intera pagina non sta effettuando transazioni in una sola volta, ma solo la pagina di div contenitore.
Sto utilizzando percentuali di css per praticamente tutto (altezze, larghezze, margini, ecc.) In modo che l'app si riduca a dimensioni di dispositivo diverse. Inoltre, sto usando javascript per centrare alcuni elementi (attivati su eventi pageshow). Penso che queste percentuali facciano parte del problema. Ho costruito un semplice test su un browser desktop (eliminando PhoneGap) e impostato un'altezza fissa sul contenitore della pagina. Questo sembrava risolvere il problema, ma quando ho provato sul mio telefono, il problema era ancora lì.
Ogni pagina nell'app è precaricata nel DOM utilizzando $ .mobile.loadPage(). Ho pensato che se li precarico, l'altezza percentuale sarebbe relativa al genitore (il div del contenitore di pagine) e le transizioni dovrebbero apparire corrette.
Guardando oltre a Jquery Mobile, ho scoperto che durante una transizione, l'altezza della pagina era impostata su una stringa vuota. Ho provato a commentare questa riga solo per testare per vedere se avrebbe funzionato con altezze percentuali. Di nuovo, ha funzionato sul mio test desktop, ma non sul telefono.
Sto utilizzando Android phonegap (livello API 8 - Android 2.2) su un Samsung Galaxy Nexus da testare.
C'è un modo per applicare il posizionamento css e javascript prima delle transizioni della pagina mantenendo i valori basati sulla percentuale?
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>
css rilevanti
#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%;
}