Zajmuję się tworzeniem aplikacji przy użyciu Jquery Mobile i Phonegap. Problem, który mam, polega na tym, że po przejściu strony pierwsza strona pojawia się niepoprawnie (elementy DOM nie są we właściwej pozycji ani w odpowiednim rozmiarze), a po zakończeniu przejścia elementy zmieniają rozmiar i przesuwają się do właściwej pozycji . (Przejście strony również pojawia się niepoprawnie przed jej wyprowadzeniem). Przetestowałem to za pomocą przejścia między przesuwem i przesuwem (chciałbym ostatecznie przejść po slajdzie).Zmiana rozmiaru strony Jquery Mobile podczas zmiany strony
Oto jsFiddle ilustrujący problem:
http://jsfiddle.net/fz7qs/2/
Jestem również za pomocą div jako pojemnik widoku tak, że cała strona nie jest na przechodzenie od razu, ale po prostu div strona kontenera.
Używam procentów css dla prawie wszystkiego (wysokości, szerokości, marginesów itp.), Aby aplikacja skalowała się do różnych rozmiarów urządzeń. Dodatkowo używam javascript do wyśrodkowania niektórych elementów (uruchamianych w przypadku zdarzeń typu pagehow). Myślę, że te wartości procentowe są częścią problemu. Skonstruowałem prosty test w przeglądarce na komputerze stacjonarnym (wyjęcie karty dźwiękowej) i ustawiłem stałą wysokość w kontenerze strony. To wydawało się naprawić problem, ale gdy próbowałem go na moim telefonie, problem nadal istniał.
Każda strona w aplikacji jest wstępnie załadowana do DOM za pomocą $ .mobile.loadPage(). Pomyślałem, że jeśli wstępnie je załaduję, procentowa wysokość będzie relatywna względem elementu nadrzędnego (div strony kontenera), a przejścia powinny wyglądać poprawnie.
W dalszej części artykułu Jquery Mobile znalazłem, że podczas przejścia wysokość strony została ustawiona na pusty ciąg. Próbowałem skomentować tę linię tylko po to, aby sprawdzić, czy będzie działała z procentowymi wysokościami. Znowu zadziałało to na moim testowaniu na komputerze, ale nie na telefonie.
Korzystam z Android Phonegap (poziom API 8 - Android 2.2) na Samsung Galaxy Nexus do przetestowania.
Czy istnieje sposób na zastosowanie pozycjonowania css i javascript przed przejściami stron z zachowaniem wartości procentowych?
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>
istotne css
#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%;
}