小编典典

如何在 iOS 上使用 Phonegap 正确检测方向变化?

all

我在下面寻找 JQTouch 参考资料时找到了这个方向测试代码。这在移动 Safari 上的 iOS 模拟器中可以正常工作,但在 Phonegap
中无法正确处理。我的项目遇到了同样的问题,导致这个测试页面被杀死。有没有办法在 Phonegap 中使用 JavaScript 来感知方向变化?

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

阅读 123

收藏
2022-08-03

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

2019 年 5 月更新: 根据 MDNwindow.orientation,这是一个已弃用的功能,大多数浏览器都不支持。该事件
window.orientation 相关联
,因此可能不应该使用。orientationchange

2022-08-03