webentwicklung-frage-antwort-db.com.de

Wie erkenne ich mit Phonegap unter iOS eine Richtungsänderung richtig?

Ich habe diesen Orientierungstestcode unten auf der Suche nach JQTouch-Referenzmaterial gefunden. Dies funktioniert im iOS-Simulator von Mobile Safari ordnungsgemäß, wird jedoch in Phonegap nicht ordnungsgemäß behandelt. Mein Projekt stößt auf dasselbe Problem, durch das diese Testseite beendet wird. Gibt es eine Möglichkeit, die Änderung der Ausrichtung mithilfe von JavaScript in Phonegap zu erkennen?

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;
  }
}
173
ajpalma

Das ist was ich mache:

function doOnOrientationChange() {
    switch(window.orientation) {  
      case -90 || 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
}
  
window.addEventListener('orientationchange', doOnOrientationChange);
  
// Initial execution if needed
doOnOrientationChange();

Update Mai 2019: window.orientation ist eine veraltete Funktion und wird von den meisten Browsern nicht unterstützt laut MDN . Das orientationchange -Ereignis ist verbunden mit window.orientation und sollte daher wahrscheinlich nicht verwendet werden.

285

Ich verwende window.onresize = function(){ checkOrientation(); } Und in checkOrientation können Sie window.orientation oder body width checking verwenden, aber die Idee ist, dass "window.onresize" die browserübergreifendste Methode ist, zumindest bei den meisten Mobilgeräten und Desktops Browser, mit denen ich testen konnte.

21
Raine

Ich bin ziemlich neu in iOS und Phonegap, aber ich konnte dies tun, indem ich einen eventListener hinzufügte. Ich habe dasselbe getan (anhand des Beispiels, auf das Sie sich bezogen haben) und konnte es nicht zum Laufen bringen. Aber das schien der Trick zu sein:

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

Möglicherweise haben Sie etwas Glück beim Durchsuchen der Google-Gruppe von PhoneGap für den Begriff "Orientierung" .

Ein Beispiel, das ich als Beispiel für das Erkennen von Orientierung gelesen habe, war Pie Guy: ( game , js file ). Es ist ähnlich wie der Code, den Sie gepostet haben, aber wie Sie ... Ich konnte es nicht zum Laufen bringen.

Eine Einschränkung: Der eventListener hat für mich funktioniert, aber ich bin mir nicht sicher, ob dies ein zu intensiver Ansatz ist. Bisher war es der einzige Weg, der für mich funktioniert hat, aber ich weiß nicht, ob es bessere, rationalisiertere Wege gibt.


[~ # ~] Update [~ # ~] korrigiert den obigen Code, es funktioniert jetzt

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

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

Während der Arbeit mit dem Ereignis orientationchange benötigte ich eine Zeitüberschreitung, um die korrekten Abmessungen der Elemente auf der Seite zu ermitteln, aber matchMedia funktionierte einwandfrei. Mein endgültiger Code:

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

Ich glaube, dass die richtige Antwort bereits veröffentlicht und akzeptiert wurde, aber es gibt ein Problem, das ich selbst erlebt habe und das einige andere hier erwähnt haben.

Auf bestimmten Plattformen können verschiedene Eigenschaften wie Fensterabmessungen (window.innerWidth, window.innerHeight) und das window.orientation Eigenschaft wird nicht aktualisiert, bis das Ereignis "orientationchange" hat geschossen. Oft ist die Eigenschaft window.orientation ist undefined für einige Millisekunden nach dem Abfeuern von "orientationchange" (zumindest in Chrome unter iOS).

Der beste Weg, wie ich mit diesem Problem umgegangen bin, war:

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

Ich überprüfe, ob die Ausrichtung undefiniert ist oder ob die Ausrichtung der zuletzt erkannten Ausrichtung entspricht. Wenn beides zutrifft, warte ich zehn Millisekunden und analysiere dann die Ausrichtung erneut. Wenn die Ausrichtung ein angemessener Wert ist, rufe ich die showXOrientation -Funktionen auf. Wenn die Ausrichtung ungültig ist, setze ich meine Überprüfungsfunktion fort und warte jeweils zehn Millisekunden, bis sie gültig ist.

Jetzt würde ich dafür eine JSFiddle machen, wie ich es normalerweise tat, aber JSFiddle hat nicht für mich gearbeitet und mein Support-Fehler dafür wurde geschlossen, da niemand anderes das gleiche Problem meldet. Wenn jemand anderes dies in eine JSFiddle verwandeln möchte, fahren Sie bitte fort.

Vielen Dank! Ich hoffe das hilft!

3
WebWanderer

hier ist was ich getan habe:

window.addEventListener('orientationchange', doOnOrientationChange);

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

Ich habe diesen Code gefunden, um festzustellen, ob sich das Gerät im Querformat befindet, und füge in diesem Fall eine Begrüßungsseite mit der Aufschrift "Ausrichtung ändern, um die Site anzuzeigen" hinzu. Es funktioniert auf iOS, Android und Windows Phones. Ich denke, dass dies sehr nützlich ist, da es ziemlich elegant ist und es vermieden wird, eine Querformatansicht für die mobile Site festzulegen. Der Code funktioniert sehr gut Das einzige, was nicht ganz befriedigt, ist, dass die Begrüßungsseite nicht angezeigt wird, wenn jemand die Seite im Querformat lädt.

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

Und der 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
Luigi
if (window.DeviceOrientationEvent) {
    // Listen for orientation changes
    window.addEventListener("orientationchange", orientationChangeHandler);
    function orientationChangeHandler(evt) {
        // Announce the new orientation number
        // alert(screen.orientation);
        // Find matches
        var mql = window.matchMedia("(orientation: portrait)");

        if (mql.matches)  //true
    }
}
0
M Fauzi Riozi