科尔多瓦检测方向变化 [英] cordova detecting orientation change

问题描述

我当前正在使用的应用需要了解设备的方向，因此我使用以下代码来检测方向变化事件:

the app I am currently working on needs to know the orientation of the device, so I use this code to detect orientationchange events:

window.addEventListener('orientationchange', function(){
    theApp.orientationChange();
});

和此属性可获取实际的方向值:

and this property to get the actual orientation value:

window.orientation

问题:当在两种风景模式之间切换时，不会触发任何事件，并且方向分别保持在现在错误的90度或-90度.

The problem: when switching between the 2 landscape modes, no event will be fired and the orientation stays at the now wrong 90 or -90 deg respectively.

我正在2台运行2.3.5和4.4.4的Android设备上进行测试，两者均显示相同的行为.

I'm testing on 2 Android devices, running 2.3.5 and 4.4.4, both show the same behavior.

所以，问题是:

• 是否有解决方法? -如何检测到此事件?
• 此错误仅在Android上显示，还是其他平台受到影响?

说明
我希望我的应用显示从用户位置到目标地理位置的方向.

clarification
I want my app to show the direction from the user's location to a target geolocation.

为此，我需要2个不同的方向信息:

To do this I need to 2 different orientation informations:

1. 罗盘标题
2. 屏幕方向

要获取指南针方向，请使用此插件:

To get the compass heading this plugin is used:

org.apache.cordova.device-orientation 0.3.10 "Device Orientation"

我用

navigator.compass.watchHeading

获取标题更新-此部分正在工作.

to get heading updates - this part is working.

要使箭头元素指向目标位置，应用程序不仅需要知道指南针的方向，还需要知道屏幕的方向(window.orientation属性的0、90，-90和180度值).
但是，当直接将设备方向从横向1更改为横向2而不使用纵向模式时，在经过测试的Android设备上，这个window.orientation属性将是错误的.此外，在这种情况下，不会触发方向更改事件.

To make an arrow element pointing to the target location, the app needs to know not only the compass heading, but also the screen orientation (the 0, 90, -90 and 180 deg values from the window.orientation property).
But this window.orientation property will be wrong on the tested Android devices, when changing the device orientation from landscape 1 to landscape 2 directly, without going over portrait mode. In addition the orientationchange event is NOT fired in this case.

IOS示例代码(顺便说一句:示例中没有特定于IOS的代码，该代码应在每个WebView中运行)KRIZTE所引用的依赖于正确的window.orientation值.提到的问题(初始更新延迟)与我的代码无关.

The IOS sample code (btw: there is nothing IOS specific in the sample, the code SHOULD run in every WebView) KRIZTE is referencing relies on correct window.orientation values. The issue mentioned (delayed initial update) is not a problem with my code.

用于检查window.orientation的(Test-)代码:

(Test-)Code used to check window.orientation:

setInterval(function(){
    console.log('WO ' + window.orientation);
}, 1000);

等待方向改变事件:

window.addEventListener('orientationchange', function(){
    console.log('window.orientation : ' + window.orientation);
});

带注释的日志:

[starting app]
[check function returns correct value:]
"WO 0"
...

[change device orientation to landscape 1]
[got orientationchanged event, value is correct]
"window.orientation : 90"
[check function returns correct value:]
"WO 90"
...

[change device orientation back to portrait]
[got orientationchanged event, value is correct]
"window.orientation : 0"
[check function returns correct value:]
"WO 0"
...

[change device orientation to landscape 2]
[got orientationchanged event, value is correct]
"window.orientation : -90"
[check function returns correct value:]
"WO -90"
...

[change device orientation to landscape 1]
...       < Problem 1: no orientationchanged event
"WO -90"  < Problem 2: wrong window.orientation value, value should be +90 deg
...

推荐答案

var orientation = window.orientation % 180 === 0 ? 'portrait' : 'landscape'

这篇关于科尔多瓦检测方向变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！