Как правильно определить изменение ориентации с помощью Phonegap на iOS?

Ответ 1

Это то, что я делаю:

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

Ответ 2

Я использую window.onresize = function(){ checkOrientation(); } И в checkOrientation вы можете использовать window.orientation или проверку ширины тела но идея в том, что "window.onresize" - это самый перекрестный браузерный метод, по крайней мере, с большинством мобильных и настольных браузеров, с которыми у меня была возможность протестировать.

Ответ 3

Я тоже очень новичок в iOS и Phonegap, но я смог сделать это, добавив в eventListener. Я сделал то же самое (используя пример, который вы ссылаетесь), и не мог заставить его работать. Но это, казалось, делало трюк:

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

Возможно, вам удастся найти в Google PhoneGap Google Group для термина "ориентация" .

В одном примере, который я читал как пример того, как определить ориентацию, был Pie Guy: (game, js file). Это похоже на код, который вы опубликовали, но как вы... Я не мог заставить его работать.

Одно предостережение: eventListener работал у меня, но я не уверен, что это чрезмерно интенсивный подход. Пока это был единственный способ, который работал у меня, но я не знаю, есть ли лучшие, более упорядоченные способы.

UPDATE исправил код выше, теперь он работает

Ответ 4

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

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

Ответ 5

Во время работы с событием orientationchange мне понадобился тайм-аут, чтобы получить правильные размеры элементов на странице, но matchMedia работал нормально. Мой последний код:

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

Ответ 6

Я считаю, что правильный ответ уже был опубликован и принят, но есть проблема, которую я испытал сам и что некоторые другие упомянули здесь.

На некоторых платформах различные свойства, такие как размеры окна (window.innerWidth, window.innerHeight) и свойство window.orientation, не будут обновляться к моменту начала события "orientationchange". Много раз свойство window.orientation равно undefined в течение нескольких миллисекунд после запуска "orientationchange" (по крайней мере, это в Chrome на iOS).

Лучший способ, который я нашел для решения этой проблемы, заключался в следующем:

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

Я проверяю, является ли ориентация либо undefined, или если ориентация равна последней обнаруженной ориентации. Если значение true, я жду десять миллисекунд, а затем снова проанализирую ориентацию. Если ориентация является правильным значением, я вызываю функции showXOrientation. Если ориентация недействительна, я продолжаю цикл моей функции проверки, ожидая десять миллисекунд каждый раз, пока она не будет действительной.

Теперь я сделал бы JSFiddle для этого, как я обычно делал, но JSFiddle не работал у меня, и моя ошибка поддержки была закрыта, поскольку никто другой не сообщал об одной и той же проблеме. Если кто-то еще хочет превратить это в JSFiddle, пожалуйста, продолжайте.

Спасибо! Надеюсь, это поможет!

Ответ 7

вот что я сделал:

window.addEventListener('orientationchange', doOnOrientationChange);

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

Ответ 8

Я нашел этот код, чтобы определить, находится ли устройство в альбомной ориентации, и в этом случае добавьте всплывающую страницу с надписью "изменить ориентацию, чтобы увидеть сайт". Он работает на iOS, Android и Windows-телефонах. Я считаю, что это очень полезно, так как оно довольно изящно и не позволяет установить пейзаж для мобильного сайта. Код работает очень хорошо. Единственное, что не полностью удовлетворяет, заключается в том, что если кто-то загружает страницу, находящуюся в ландшафтном представлении, страница всплеска не появляется.

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

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

Ответ 9

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

Ответ 10

Следующие работали для меня:

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

Мне нужен таймаут, потому что значение window.orientation не обновляется сразу.

Ответ 11

Я создаю приложение jQTouch в PhoneGap для iPhone. Я боролся с этой проблемой в течение нескольких дней. Я видел решение eventlistener несколько раз, но просто не мог заставить его работать.

В конце концов я придумал другое решение. Он в основном проверяет ширину тела периодически, используя setimeout. Если ширина равна 320, тогда ориентация - портретная, если 480 - пейзаж. Затем, если ориентация изменилась со времени последней проверки, она сгенерирует функцию портретного материала или функцию ландшафтного материала, где вы можете сделать свою вещь для каждой ориентации.

Код (заметьте, я знаю, что в коде есть повторение, просто не надо было его обрезать!):

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