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

IT技术 javascript iphone ios cordova jqtouch
2021-02-08 16:01:39

我在下面找到了这个方向测试代码，以寻找 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;
  }
}
6个回答

这就是我所做的：

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

这是本次讨论中唯一对我有用的解决方案:) +1
2021-03-12 16:01:39
此外，我发现orientationchange 在宽度和高度改变之前触发，因此需要一点延迟才能使用宽度和高度正确检测方向。为此，我存储当前方向，当检测到变化时，我会以 50 毫秒到 250 毫秒的增量检查方向的变化。一旦发现差异，我就会相应地更新页面。在我的 Nexus 5 上，它通常会在 150 毫秒后检测宽度与高度的差异。
2021-04-01 16:01:39
出于兴趣，您为什么使用 setTimeout Kirk？
2021-04-05 16:01:39
当心！这是特定于设备的 - 度数是指与设备标准方向的差异。换句话说，如果平板电脑设计为横向使用，那么 90 将意味着它处于纵向模式。作为解决此问题的方法，我最初检查窗口的高度与宽度以存储方向，并在发生变化时使用orientationchange 来更新它。
2021-04-09 16:01:39
我做了 window.onorientationchange = function() { setTimeout(functionName, 0); };
2021-04-10 16:01:39

我使用window.onresize = function(){ checkOrientation(); } 并且在 checkOrientation 中，您可以使用 window.orientation 或主体宽度检查，但这个想法是，“window.onresize”是最跨浏览器的方法，至少对于我拥有的大多数移动和桌面浏览器而言测试的机会。

这是一个很好的观点。如果您使用面向 Web 的技术进行开发，则此方法允许您在浏览器中更轻松地进行调试和测试，而不是每次都进行部署/模拟。
2021-03-16 16:01:39
@HellBaby 当键盘出现时，该函数将被调用，但是，根据您用于方向检测的方法，它会检测到方向没有改变，就像 window.orientation 一样。所以我仍然坚持我的回答。
2021-03-17 16:01:39
@MattRay 您可以使用能够模拟此类设备行为的最新开发工具包轻松测试方向更改。
2021-03-23 16:01:39
这根本不行……因为当键盘出现时，它会调整大小（这不是唯一的情况）。所以这是一个很大的不！
2021-03-26 16:01:39
@Raine 我在 Ipad 4 上使用了该方法，但因该问题而被迫更改它。所以也许它适用于某些设备，但不适用于所有设备。
2021-04-05 16:01:39 
if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
  // you're in LANDSCAPE mode
}
您可以将其附加到resize事件。但是，IIRC，这些查询在键盘向上时将无法正常工作。
2021-03-28 16:01:39

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

您可能会在 PhoneGap Google Group 中搜索“orientation”一词很幸运。

我读到的一个关于如何检测方向的例子是 Pie Guy: ( game , js file )。它与您发布的代码相似，但就像您一样......我无法让它工作。

一个警告： eventListener 为我工作，但我不确定这是否是一种过于密集的方法。到目前为止，这是对我有用的唯一方法，但我不知道是否有更好、更简化的方法。

UPDATE修复了上面的代码，现在可以使用了

虽然这个问题只涉及 PhoneGap 和 iOS 的使用，虽然已经有人回答了，但我可以对 2019 年用 JS 检测屏幕方向这个更广泛的问题补充几点：

  1. window.orientation属性已弃用，Android 浏览器不支持。有一个较新的属性可提供有关方向的更多信息 - screen.orientation。但它仍然是实验性的，不受iOS Safari支持。因此，要获得最佳结果，您可能需要结合使用两者：const angle = screen.orientation ? screen.orientation.angle : window.orientation.

  2. 正如@benallansmith 在他的评论中提到的，window.onorientationchange事件是在之前触发的window.onresize，因此除非在orientationchange 事件之后添加一些延迟，否则您将无法获得屏幕的实际尺寸。

  3. 有一个Cordova Screen Orientation Plugin用于支持旧的移动浏览器，但我相信现在没有必要使用它。

  4. 还有一个screen.onorientationchange事件，但它已被弃用，不应使用。添加只是为了答案的完整性。

在我的用例中，我不太关心实际的方向，而是关心窗口的实际宽度和高度，这显然会随着方向而变化。所以我使用resize事件来避免处理orientationchange事件和实现窗口尺寸之间的延迟：

window.addEventListener('resize', () => {
  console.log(`Actual dimensions: ${window.innerWidth}x${window.innerHeight}`);
  console.log(`Actual orientation: ${screen.orientation ? screen.orientation.angle : window.orientation}`);
});

注 1：我在这里使用了 EcmaScript 6 语法，如果需要，请确保将其编译为 ES5。

注 2：切换虚拟键盘时window.onresize也会触发事件，而不仅仅是在方向更改时。

谢谢，那种拯救了我的身后！我先尝试使用cordova插件，然后是current-device；但你是完全正确的，自己构建它是非常容易的。我做了一个指令并称它为一天
2021-04-08 16:01:39
其它你可能感兴趣的问题
上一篇我应该使用对象文字还是构造函数？ 下一篇如何通过 history.pushState 获得有关历史更改的通知？