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

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.

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

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
  // you're in LANDSCAPE mode
}

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)
  });
}

Voici ce que j'ai fait:

window.addEventListener('orientationchange', doOnOrientationChange);

function doOnOrientationChange()
{
      if (screen.height > screen.width) {
         console.log('portrait');
      } else {
         console.log('landscape');
      }
}

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!

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>

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

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!');
}