Jak prawidłowo wykryć zmianę orientacji za pomocą Phonegap na iOS?

Używam window.onresize = function(){ checkOrientation(); } A w checkOrientation możesz użyć window.sprawdzanie orientacji lub szerokoÅ›ci ciaÅ‚a ale chodzi o to, " okno.onresize " to metoda najbardziej cross browser, przynajmniej z wiÄ™kszoÅ›ciÄ… przeglÄ…darek mobilnych i desktopowych, które miaÅ‚em okazjÄ™ przetestować.

Jestem całkiem nowy w iOS i Phonegap, ale udało mi się to zrobić, dodając w eventListener. Zrobiłem to samo (używając przykładu, do którego się odwołujesz) i nie mogłem go uruchomić. Ale to chyba zadziałało:

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

Jednym z przykładów, o którym czytałem jako przykład jak wykryć orientację, był Pie Guy: ( Gra, plik js ). Jest podobny do kodu napisałeś, ale jak ty... Nie mogłem go uruchomić.

Jedno zastrzeżenie: eventListener pracował dla mnie, ale nie jestem pewien, czy jest to zbyt intensywne podejście. Do tej pory to był jedyny sposób, który działa dla mnie, ale nie wiem, czy są lepsze, bardziej usprawnione sposoby.

UPDATE Naprawiono powyższy kod, działa teraz

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

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

Podczas pracy ze zdarzeniem orientationchange potrzebowaÅ‚em limitu czasu, aby uzyskać poprawne wymiary elementów na stronie, ale matchMedia dziaÅ‚aÅ‚o dobrze. Mój ostatni kod:

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

Oto co zrobiłem:

window.addEventListener('orientationchange', doOnOrientationChange);

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

Uważam, że poprawna odpowiedź została już opublikowana i zaakceptowana, ale jest kwestia, której doświadczyłem sam i o której niektórzy inni tutaj wspominali.

Na niektórych platformach różne wÅ‚aÅ›ciwoÅ›ci, takie jak wymiary okien(window.innerWidth, window.innerHeight) WÅ‚aÅ›ciwość window.orientation nie zostanie zaktualizowana do czasu wywoÅ‚ania zdarzenia "orientationchange". Wiele razy WÅ‚aÅ›ciwość window.orientation wynosi undefined przez kilka milisekund po uruchomieniu "orientationchange" (przynajmniej jest w Chrome na iOS).

The najlepszy sposób na rozwiązanie tego problemu to:

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

Sprawdzam, czy orientacja jest niezdefiniowana lub czy orientacja jest równa ostatniej wykrytej orientacji. JeÅ›li jedno z nich jest prawdziwe, czekam dziesięć milisekund, a nastÄ™pnie analizujÄ™ orientacjÄ™ ponownie. JeÅ›li orientacja jest wartoÅ›ciÄ… wÅ‚aÅ›ciwÄ…, wywoÅ‚ujÄ™ funkcje showXOrientation. JeÅ›li orientacja jest nieprawidÅ‚owa, kontynuujÄ™ pÄ™tlÄ™ funkcji sprawdzania, czekajÄ…c dziesięć milisekund za każdym razem, aż bÄ™dzie ona ważna.

Teraz zrobiłbym JSFiddle do tego, jak zwykle, ale JSFiddle nie działa dla mnie i mój błąd wsparcia dla niego został zamknięty, ponieważ nikt inny nie zgłasza tego samego problemu. Jeśli ktoś jeszcze chce zmienić to w JSFiddle, proszę bardzo.

Znalazłem ten kod, aby wykryć, czy urządzenie jest w orientacji poziomej i w tym przypadku dodać stronę powitalną z napisem "Zmień orientację, aby zobaczyć stronę". Działa na telefonach z systemem iOS, android i windows. Myślę, że jest to bardzo przydatne, ponieważ jest dość eleganckie i unikaj ustawiania widoku krajobrazu dla strony mobilnej. Kod działa bardzo dobrze. Jedyną rzeczą nie do końca satysfakcjonującą jest to, że jeśli ktoś załaduje stronę znajdującą się w widoku poziomym, strona powitalna nie pojawia się.

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

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

Zadziałało dla mnie:

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

PotrzebowaÅ‚em limitu czasu, ponieważ wartość window.orientation nie aktualizuje siÄ™ od razu

Tworzę aplikację jQTouch w PhoneGap dla iPhone ' a. Walczę z tym problemem od kilku dni. Widziałem rozwiązanie eventlistener zasugerował kilka razy, ale po prostu nie mógł go do pracy.

Code (Uwaga, wiem, że jest jakieś powtórzenie w kodzie, po prostu nie zadałem sobie jeszcze trudu, aby go przyciąć!):

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