科尔多瓦检测方向变化

时间:2015-02-02 17:14:24

标签: cordova orientation

我目前正在处理的应用程序需要知道设备的方向,因此我使用此代码来检测orientationchange事件:

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

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

window.orientation

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

我在2台Android设备上进行测试,运行2.3.5和4.4.4,两者都表现出相同的行为。

所以,问题是:

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

澄清
我希望我的应用程序显示从用户位置到目标地理位置的方向。

要做到这一点,我需要2个不同的方向信息:

  1. 指南针标题
  2. 屏幕方向
  3. 要获得罗盘标题,请使用此插件:

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

    我用

    navigator.compass.watchHeading
    

    获取标题更新 - 此部分正在运行。

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

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

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

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

    等待orientationchange事件:

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

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

根据文档,Android 平台的“当手机旋转 180 度时,screen.orientation 属性不会更新”。 https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/

答案 2 :(得分:0)

希望你已经添加了上面的概念插件吧?然后像这样使用它,

<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
        function onload() {
            window.addEventListener("orientationchange", orientationChange, true);

            function orientationChange(e) {

                var currentOrientation = "";

                if (window.orientation == 0) {
                    currentOrientation = "portrait";
                } else if (window.orientation == 90) {
                    currentOrientation = "landscape";
                } else if (window.orientation == -90) {
                    currentOrientation = "landscape";
                } else if (window.orientation == 180) {
                    currentOrientation = "portrait";
                }
                document.getElementById("status").innerHTML = currentOrientation;

            }
        }
    </script>

</head>
<body onload="onload()">

    <h2>Orientation Test</h2>
    <div id="status"></div>

</body>
</html>

window.addEventListener(“orientationchange”,orientationChange,true);一旦你初始化它,它会在你每次改变方向时触发并调用“orientationChange”。所以你不必把serInterval或任何东西。上面的代码是不言自明的。

希望它有所帮助!

答案 3 :(得分:0)

只是想补充说上面的解决方案代码效率有点低。相反,使用它会好得多。

    var orientation = 'portrait';

    if (Math.floor(Math.abs(window.orientation)/90) === 1) {
        orientation = 'landscape';
    }  

本来会留下这个评论,但我还是太新了,不允许留下一个。