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

Question

Я нашел этот код теста ориентации ниже в поисках справочного материала JQTouch. Это работает правильно в симуляторе iOS на мобильном Safari, но неправильно обрабатывается в Phonegap. Мой проект сталкивается с той же проблемой, которая убивает эту тестовую страницу. Есть ли способ почувствовать изменение ориентации с помощью JavaScript в 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;
  }
}

Answer 1

Вот что я делаю:

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

---

Обновление май 2019 года: window.orientation является устаревшей функцией и не поддерживается большинством браузеров в соответствии с MDN ,Событие orientationchange связано с window.orientation и поэтому, вероятно, не должно использоваться.

Answer 2

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

Answer 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 Group PhoneGap термин "ориентация" .

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

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

---

ОБНОВЛЕНИЕ исправил код выше, это работаетТеперь

Answer 4

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

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

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

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

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

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

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

Answer 7

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

window.addEventListener('orientationchange', doOnOrientationChange);

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

Answer 8

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

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

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

Answer 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 не обновляется сразу