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

J'ai trouvé ce code de test d'orientation ci-dessous à la recherche de matériel de référence JQTouch. Cela fonctionne correctement dans le simulateur iOS sur Safari mobile, mais n'est pas géré correctement dans Phonegap. Mon projet rencontre le même problème 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;
  }
}
162
demandé sur Xufox 2011-03-12 22:26:01

10 réponses

C'est ce que je fais:

function doOnOrientationChange() {
    switch(window.orientation) {  
      case -90 || 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
}
  
window.addEventListener('orientationchange', doOnOrientationChange);
  
// Initial execution if needed
doOnOrientationChange();
266
répondu Benny Neugebauer 2017-04-16 20:02:55

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

20
répondu Raine 2011-09-15 23:01:40

Je suis assez nouveau pour iOS et Phonegap, mais j'ai pu le faire en ajoutant un eventListener. J'ai fait la même chose (en utilisant l'exemple que vous référencez), et je n'ai pas pu le faire fonctionner. Mais cela semblait 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 avez peut-être de la chance de chercher dans le groupe Google PhoneGap le terme "orientation".

Un exemple que j'ai lu à titre d'exemple sur la façon de détecter l'orientation était Pie Guy: (jeu, Fichier js ). C'est similaire au code vous avez posté, mais comme vous... Je ne pouvais pas 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 le seul moyen qui a fonctionné pour moi, mais je ne sais pas s'il y a des moyens meilleurs et plus rationalisés.


UPDATE correction du code ci-dessus, cela fonctionne maintenant

10
répondu avoision 2013-03-28 17:42:11
if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
  // you're in LANDSCAPE mode
}
10
répondu Alyssa Reyes 2015-08-07 06:16:37

Tout en travaillant avec l'événement orientationchange, j'avais besoin d'un délai d'attente pour obtenir les dimensions correctes des éléments de 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)
  });
}
4
répondu oncode 2014-08-15 07:28:31

Voici ce que j'ai fait:

window.addEventListener('orientationchange', doOnOrientationChange);

function doOnOrientationChange()
{
      if (screen.height > screen.width) {
         console.log('portrait');
      } else {
         console.log('landscape');
      }
}
2
répondu Raul Gomez 2015-11-12 18:41:19

Je crois que la bonne réponse a déjà été affichée et acceptée, mais il y a un problème que j'ai vécu moi-même et que d'autres ont mentionné ici.

Sur certaines plates-formes, diverses propriétés telles que les dimensions des fenêtres (window.innerWidth, window.innerHeight) et la propriété window.orientation ne sera pas mise à jour au moment où l'événement "orientationchange" sera déclenché. Plusieurs fois, la propriété window.orientation est undefined pendant quelques millisecondes après le déclenchement de "orientationchange" (au moins elle est dans Chrome sur iOS).

Le la meilleure façon que j'ai trouvée pour gérer ce problème était:

var handleOrientationChange = (function() {
    var struct = function(){
        struct.parse();
    };
    struct.showPortraitView = function(){
        alert("Portrait Orientation: " + window.orientation);
    };
    struct.showLandscapeView = function(){
        alert("Landscape Orientation: " + window.orientation);
    };
    struct.parse = function(){
        switch(window.orientation){
            case 0:
                    //Portrait Orientation
                    this.showPortraitView();
                break;
            default:
                    //Landscape Orientation
                    if(!parseInt(window.orientation) 
                    || window.orientation === this.lastOrientation)
                        setTimeout(this, 10);
                    else
                    {
                        this.lastOrientation = window.orientation;
                        this.showLandscapeView();
                    }
                break;
        }
    };
    struct.lastOrientation = window.orientation;
    return struct;
})();
window.addEventListener("orientationchange", handleOrientationChange, false);

Je vérifie si l'orientation est indéfinie ou si l'orientation est égale à la dernière orientation détectée. Si l'un ou l'autre est vrai, j'attends dix millisecondes puis analyse à nouveau l'orientation. Si l'orientation est une valeur correcte, j'appelle les fonctions showXOrientation. Si l'orientation n'est pas valide, je continue à Boucler ma fonction de vérification, en attendant dix millisecondes à chaque fois, jusqu'à ce qu'elle soit valide.

Maintenant, je ferais un JSFiddle pour cela, comme je le faisais habituellement, mais JSFiddle n'a pas fonctionné pour moi et mon bug de support pour cela a été fermé car personne d'autre ne signale le même problème. Si quelqu'un d'autre veut transformer cela en un JSFiddle, veuillez aller de l'avant.

Merci! J'espère que cela aide!

2
répondu WebWanderer 2016-03-18 15:01:34

J'ai trouvé ce code pour détecter si l'appareil est en orientation paysage et dans ce cas ajouter une page de démarrage disant "changer d'orientation pour voir le site". Il fonctionne sur les téléphones iOS, android et windows. Je pense que c'est très utile car c'est assez élégant et évite de définir une vue paysage pour le site mobile. Le code fonctionne très bien. La seule chose qui n'est pas complètement satisfaisante est que si quelqu'un charge la page en mode paysage la page de démarrage ne le fait pas apparaît.

<script>
(function() {
    'use strict';

    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
    if (isMobile.any()) {
        doOnOrientationChange();
        window.addEventListener('resize', doOnOrientationChange, 'false');
    }

    function doOnOrientationChange() {
        var a = document.getElementById('alert');
        var b = document.body;
        var w = b.offsetWidth;
        var h = b.offsetHeight;
        (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
    }
})();
</script>

Et le HTML: <div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>

1
répondu Luigi 2015-06-21 15:17:14

Ce qui suit a fonctionné pour moi:

function changeOrientation(){
switch(window.orientation) {
case 0: // portrait, home bottom
case 180: // portrait, home top
 alert("portrait H: "+$(window).height()+" W: "+$(window).width());       
 break;
          case -90: // landscape, home left
          case 90: // landscape, home right
        alert("landscape H: "+$(window).height()+" W: "+$(window).width());
            break;
        }
    }

 window.onorientationchange = function() { 
            //Need at least 800 milliseconds
            setTimeout(changeOrientation, 1000);
        }

J'avais besoin du délai d'attente car la valeur de window.orientation ne se met pas à jour tout de suite

-1
répondu catalyst294 2012-06-12 21:15:22

Je crée une application jQTouch dans PhoneGap pour l'iPhone. J'ai lutté avec ce problème pendant des jours. J'ai vu la solution eventlistener suggérée à quelques reprises, mais je n'ai tout simplement pas pu la faire fonctionner.

À la fin, j'ai trouvé une solution différente. Il vérifie fondamentalement la largeur du corps périodiquement en utilisant settimeout. Si la largeur est 320 alors l'orientation est portrait, si 480 alors paysage. Ensuite, si l'orientation a changé depuis la dernière vérification, elle déclenchera soit un fonction portrait stuff ou une fonction paysage stuff où vous pouvez faire votre truc pour chaque orientation.

Code (notez, je sais qu'il y a une certaine répétition dans le code, je n'ai tout simplement pas pris la peine de le réduire encore!):

// get original orientation based on body width
deviceWidth = $('body').width();
if (deviceWidth == 320) {
    currentOrientation = "portrait";
}
else if (deviceWidth == 480) {
    currentOrientation = "landscape";
}

// fire a function that checks the orientation every x milliseconds
setInterval(checkOrientation, 500);

// check orientation
function checkOrientation() {
    deviceWidth = $('body').width();
    if (deviceWidth == '320') {
        newOrientation = "portrait";
    }
    else if (deviceWidth == '480') {
        newOrientation = "landscape";
    }
    // if orientation changed since last check, fire either the portrait or landscape function
    if (newOrientation != currentOrientation) {
        if (newOrientation == "portrait") {
            changedToPortrait();
        }
        else if (newOrientation == "landscape") {
            changedToLandscape();
        }
        currentOrientation = newOrientation;
    }
}

// landscape stuff
function changedToLandscape() {
    alert('Orientation has changed to Landscape!');
}

// portrait stuff
function changedToPortrait() {
    alert('Orientation has changed to Portrait!');
}
-2
répondu Danny Connell 2011-06-16 13:49:39