Jquery Mobile page de redimensionnement pendant la transition de la page

Je développe une application utilisant Jquery Mobile et Phonegap. Le problème que j'ai est que lorsque je fais une transition de page, la première page apparaît d'abord de manière incorrecte (les éléments DOM ne sont pas dans la bonne position ni dans la bonne taille); une fois la transition terminée, les éléments redimensionnent et se déplacent vers la position correcte . (En outre, la transition de la page apparaît également de manière incorrecte avant qu'elle ne se déplace). J'ai testé ceci en utilisant à la fois des transitions de fondu et de diaphonie (j'aimerais avoir des transitions de diapositive en fin de compte).

Voici un jsFiddle illustrant le problème:
Http://jsfiddle.net/fz7qs/2/

  • Dépendance non résolue de sbt-android-plugin 0.6.0-SNAPSHOT?
  • Impossible d'exécuter JAVA même si le chemin d'accès est défini sur Windows 8 Enterprise - Cordova
  • Android AlarmManager ne fonctionne pas sur certains périphériques lorsque l'application est fermée
  • Le paramètre IllegalArgumentException doit être un descendant de cette vue dans ViewGroup.offsetRectBetweenParentAndChild
  • Android télécharger binary files problems
  • Impossible de créer une application Android avec des crashlytics
  • J'utilise également un div comme un conteneur de page afin que la page entière ne se déplace pas à la fois, mais juste la div. Conteneur de page.

    J'utilise des pourcentages css pour pratiquement tout (hauteurs, largeurs, marges, etc.) afin que l'application s'adapte à différentes tailles de périphériques. En outre, j'utilise javascript pour centrer certains éléments (lancé sur l'événement pageshow). Je pense que ces pourcentages font partie du problème. J'ai construit un test simple sur un navigateur de bureau (en supprimant le timbre téléphonique) et je fixe une hauteur fixe au conteneur de page. Cela semblait résoudre le problème, mais quand je l'ai essayé sur mon téléphone, la question était toujours là.

    Chaque page de l'application est préchargée dans le DOM à l'aide de $ .mobile.loadPage (). J'ai pensé que si je les précharge, la hauteur de pourcentage serait relative au parent (la diviseur de contenance de page) et les transitions devraient être correctes.

    En regardant plus encore Jquery Mobile, j'ai constaté que pendant une transition, la hauteur de la page était définie sur une chaîne vide. J'ai essayé de commenter cette ligne juste pour tester pour voir si cela fonctionnerait avec des hauteurs de pourcentage. Encore une fois, cela a fonctionné sur mon test de bureau, mais pas sur le téléphone.

    J'utilise Android phonegap (API 8 – Android 2.2) sur un Samsung Galaxy Nexus pour tester.

    Existe-t-il un moyen d'appliquer le positionnement css et javascript avant la transition des pages tout en conservant des valeurs basées sur le pourcentage?

    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 pertinent

     #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%; } 

  • Message pop-up Android
  • Javascript pour détecter la largeur de l'écran du navigateur mobile?
  • Android: l'icône APK n'est pas installée
  • Certains (mais pas tous) les utilisateurs reçoivent "Le fichier de package n'a pas été correctement enregistré" lors du téléchargement de mon application depuis Google Play
  • Convertir InputStream en JSONObject
  • Pourquoi est-ce que je reçois NullPointerException lors de l'envoi d'un SMS sur un HTC Desire, ou qu'est-ce que SubmitPdu?
  • One Solution collect form web for “Jquery Mobile page de redimensionnement pendant la transition de la page”

    Tout d'abord, vous pouvez faire en sorte que votre html ressemble à des pages de tutoriels mobiles jquery. Vous devez avoir une structure html comme:

     <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 --> 

    Regardez l' anatomie de la page mobile jquery .

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.