2010-08-23 5 views
3

J'adapte un petit magazine web HTML/CSS/Javascript comme un iApp pour l'iPad avec le grand framework mobile PhoneGap. Tout fonctionne bien, sauf le changement d'orientation du mode portrait au mode paysage.Javascript Orientation Le changement ne fonctionne pas avec PhoneGap sur iPad

J'utilise le code Javascript suivant dans l'en-tête du index.html (portrait):

var isiPad = navigator.userAgent.match(/iPad/i) != null; 
    var isiPhone = navigator.userAgent.match(/iPhone/i) != null; 

    function updateOrientation() { 
    if (isiPad || isiPhone) { 
    switch (window.orientation) { 
    case 90: 
     window.location = "index_landscape.html"; 
     break; 
    case -90: 
     window.location = "index_landscape.html"; 
     break; 
    } 
    } 
    } 

avec la balise body suivant:

<body onorientationchange="updateOrientation();"> 

Si je tourne l'iPad en mode paysage , il ne change pas à index-landscape.html.

Est-ce que quelqu'un sait où est le problème? N'est-il pas possible de changer le fichier HTML, en changeant d'orientation dans le framework PhoneGap? En d'autres termes, puis-je utiliser uniquement un fichier HTML (index.html) avec PhoneGap et utiliser CSS pour modifier l'orientation?

Si je consulte l'application en tant que site Web avec le navigateur iPad Safari, le changement d'orientation fonctionne correctement.

Merci pour toute aide!

+0

Trouvé que window.orientation travaillé pour moi sur Android 2.2 avec Droid X en utilisant PhoneGap. –

Répondre

3

Je viens de trouver une autre solution au problème. J'utilise le corps fonction onload avec la fonction onDeviceReady de phonegap.js pour vérifier les orientations:

Le code javascript suivant fonctionne correctement maintenant:

function onLoad() { 
     document.addEventListener("deviceready", onDeviceReady, false); 
    } 

    function onDeviceReady() { 
     document.addEventListener("orientationChanged", updateOrientation); 
    } 

    function updateOrientation(e) { 
     switch (e.orientation) { 
      case 90: 
       window.location = "index_landscape.html"; 
       break; 
      case -90: 
       window.location = "index_landscape.html"; 
       break; 
     } 
    } 

MISE À JOUR: Cela a fonctionné il y a plus de deux ans avec l'ancien versions de Phonegap et iOS SDK, mais selon certains utilisateurs, cela ne fonctionne plus.

+2

Cet événement n'a pas fonctionné pour moi (Android 2.2 sur Droid X) et l'événement orientationChanged PhoneGap n'est pas documenté (du moins pas que je pourrais trouver à docs.phonegap.com). –

+0

L'événement n'a pas fonctionné pour moi sur iOS 5 SDK. –

+0

Cela ne fonctionnera pas, car le webview est juste un enfant de la vue qui change réellement d'orientation – Thomas

Questions connexes