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


178

我在下面找到此定向测试代码,以查找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;
  }
}

Answers:


297

这是我的工作:

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


根据MDN的定义,2019年5月更新:window.orientation已弃用,大多数浏览器均不支持。该事件与window.orientation相关联,因此可能不应该使用。orientationchange


3
这是在本次讨论中对我
有用

9
我做到了window.onorientationchange = function() { setTimeout(functionName, 0); };
Kirk Strobeck

11
出于兴趣,您为什么使用setTimeout Kirk?

10
小心!这是特定于设备的-度数是指与设备标准方向的差异。换句话说,如果平板电脑设计为横向使用,则90表示它处于纵向模式。为此,我首先检查窗口的高度与宽度,以存储方向,如果有更改,请使用orientationchange进行更新。
benallansmith '16

15
此外,我发现在更改宽度和高度之前会触发directionchange,因此需要一点点延迟才能使用宽度和高度正确检测方向。为此,我存储了当前方向,并在检测到变化时以50ms的增量(最多250ms)检查方向的变化。找到差异后,我会相应地更新页面。在Nexus 5上,通常会在150毫秒后检测出宽度与高度的差异。
benallansmith '16
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.