Comment détecter correctement un changement d'orientation en utilisant Phonegap sur iOS ?

Question

J'ai trouvé ce code de test d'orientation ci-dessous en cherchant du matériel de référence JQTouch. Cela fonctionne correctement dans le simulateur iOS sur Safari mobile mais n'est pas traité correctement dans Phonegap. Mon projet rencontre le même problème que celui qui tue cette page de test. Existe-t-il un moyen de détecter le changement d'orientation en utilisant JavaScript dans Phonegap ?

window.onorientationchange = function() {
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
    left, or landscape mode with the screen turned to the right. */
  var orientation = window.orientation;
  switch (orientation) {
    case 0:
      /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
         in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "portrait");

      /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
      document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
      break;

    case 90:
      /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
         body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "landscape");

      document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
      break;

    case -90:
      /* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
         body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class", "landscape");

      document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
      break;
  }
}

Answer 1

C'est ce que je fais :

function doOnOrientationChange() {
    switch(window.orientation) {  
      case -90: case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
}

window.addEventListener('orientationchange', doOnOrientationChange);

// Initial execution if needed
doOnOrientationChange();

---

Mise à jour en mai 2019 : window.orientation est une fonctionnalité obsolète et n'est pas prise en charge par la plupart des navigateurs. selon MDN . Le site orientationchange L'événement est associé à window.orientation et ne devrait donc probablement pas être utilisé.

Answer 2

J'utilise window.onresize = function(){ checkOrientation(); } Et dans checkOrientation, vous pouvez utiliser window.orientation ou la vérification de la largeur du corps. mais l'idée est que "window.onresize" est la méthode la plus polyvalente, du moins avec la majorité des navigateurs mobiles et de bureau que j'ai eu l'occasion de tester.

Answer 3

Les réponses précédentes ont mal orthographié l'évènement, le code correct serait

document.addEventListener("orientationchange", updateOrientation);

Fonctionne sur iPad et Galaxy Tab.

Answer 4

Je suis assez novice en matière d'iOS et de Phonegap, mais j'ai réussi à le faire en ajoutant un eventListener. J'ai fait la même chose (en utilisant l'exemple auquel vous faites référence), et je n'ai pas réussi à le faire fonctionner. Mais cela semble faire l'affaire :

// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation); 

function updateOrientation(e) {
switch (e.orientation)
{   
    case 0:
        // Do your thing
        break;

    case -90:
        // Do your thing
        break;

    case 90:
        // Do your thing
        break;

    default:
        break;
    }
}

Vous pouvez avoir de la chance en cherchant dans le groupe Google PhoneGap. pour le terme "orientation". .

Un exemple que j'ai lu sur la façon de détecter l'orientation est celui de Pie Guy : ( jeu , fichier js ). C'est similaire au code que vous avez posté, mais comme vous... Je n'ai pas réussi à le faire fonctionner.

Une mise en garde : l'eventListener a fonctionné pour moi, mais je ne suis pas sûr que ce soit une approche trop intensive. Jusqu'à présent, c'est la seule méthode qui a fonctionné pour moi, mais je ne sais pas s'il existe de meilleures méthodes, plus rationnelles.

---

UPDATE J'ai corrigé le code ci-dessus, il fonctionne maintenant

Answer 5

Tout en travaillant avec l' orientationchange événement, j'avais besoin d'un délai d'attente pour obtenir les bonnes dimensions des éléments dans la page, mais matchMedia a bien fonctionné. Mon code final:

var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia;

if (typeof(matchMedia) !== 'undefined') {
  // use matchMedia function to detect orientationchange
  window.matchMedia('(orientation: portrait)').addListener(function() {
    // your code ...
  });
} else {
  // use orientationchange event with timeout (fires to early)
  $(window).on('orientationchange', function() {
    window.setTimeout(function() {
      // your code ...
    }, 300)
  });
}