Jquery Mobile ve Phonegap kullanarak bir uygulama geliştiriyorum. Sahip olduğum sorun, bir sayfa geçişi yaptığımda, gelen sayfanın ilk olarak yanlış görüntülendiğini (DOM öğelerinin doğru konumda değil, doğru boyutta), ardından geçiş tamamlandıktan sonra, öğelerin yeniden boyutlandırılıp doğru konuma taşınmasıdır. . (Ayrıca, sayfa geçişi dışarı çıkmadan önce de yanlış görünüyor). Bunu hem sol hem de slayt geçişlerini kullanarak test ettim (en sonunda slayt geçişlerine sahip olmak istiyorum). Jquery Mobil sayfa geçiş sırasında yeniden boyutlandırma
İşte jsFiddle sorunu gösteren geçerli:http://jsfiddle.net/fz7qs/2/
Ben de tüm sayfa aynı anda geçiş yapmıyorsa böylece sayfa kapsayıcı olarak bir div, ama sadece sayfa kapsayıcı div kullanıyorum.
Uygulamanın farklı aygıt boyutlarına ölçeklenebilmesi için hemen hemen her şey (yükseklik, genişlik, kenar boşlukları, vb.) Için css yüzdesi kullanıyorum. Ayrıca, bazı öğeleri (pageshow olayına ateş) ortalamak için javascript kullanıyorum. Sanırım bu yüzdeler sorunun bir parçası. Masaüstü tarayıcıda basit bir test oluşturdum (telefon hafızasını kaldırarak) ve sayfa kabına sabit bir yükseklik ayarlıyorum. Bu sorunu düzeltmek için görünüyordu, ancak telefonumda denediğimde sorun hala oradaydı.
Uygulamadaki her sayfa DOM'a $ .mobile.loadPage() kullanılarak önceden yüklenmiştir. Onları önceden yüklerseniz, yüzde oranının ana sayfaya göre (sayfa kabı div) göreceli ve geçişler doğru görünmelidir.
Jquery Mobile'a daha yakından baktığımda, geçiş sırasında sayfanın yüksekliğinin boş bir dizeye ayarlandığını gördüm. Yüzde yüksekliklerle çalışıp çalışmadığını görmek için bu satırı yorumlamaya çalıştım. Yine, masaüstü testimde çalıştı, ama telefonda değil.
Test etmek için Samsung Galaxy Nexus'ta Android phonegap (API seviyesi 8 - Android 2.2) kullanıyorum.
Yüzde tabanlı değerleri korurken sayfa geçişlerinden önce css ve javascript konumlandırmasının uygulanmasının bir yolu var mı?
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>
Eğer html yapabilirsiniz hepsinden
#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%;
}