Cordova检测屏幕方向变化

4

我目前正在开发的应用需要知道设备的方向,因此我使用以下代码来检测方向变化事件:

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

同时,通过该属性获得实际方向值:

window.orientation

问题:在两种横屏模式之间切换时,不会触发任何事件,并且方向保持在现在错误的90度或-90度。
我正在测试2个Android设备,运行2.3.5和4.4.4,两者都显示相同的行为。
因此,问题是:
  • 是否有解决方法? - 如何检测此事件?
  • 此错误仅在Android上显示,还是其他平台也受到影响?
澄清
我希望我的应用程序显示从用户位置到目标地理位置的方向。
为此,我需要两个不同的方向信息:
  1. 指南针方向
  2. 屏幕方向
要获取指南针方向,使用此插件:
org.apache.cordova.device-orientation 0.3.10 "Device Orientation"

我使用

navigator.compass.watchHeading

获取方向更新 - 这一部分正常工作。

为了创建一个指向目标位置的箭头元素,应用程序不仅需要知道罗盘方向,还需要知道屏幕方向(从window.orientation属性中获取的0、90、-90和180度的值)。
但是,在从横向1直接旋转到横向2的情况下,Android设备上的window.orientation属性将是错误的,而没有经过纵向模式。此外,此情况下不会触发orientationchange事件。

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

用于检查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
...

一个建议。使用Cordova的方向变化插件https://github.com/apache/cordova-plugin-device-orientation会更好。 - locknies
请查看此链接http://www.williammalone.com/articles/html5-javascript-ios-orientation/,如果仍然无法帮助,请告诉我们。 - locknies
你好KRIZTE,我正在使用你提到的插件,请查看我帖子中的编辑。 - Gisela
4个回答

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

1
为了帮助 OP 解决当前的问题,可以在答案中添加一些解释说明。 - ρяσѕρєя K

1

我想补充一下,上面的解决方案代码有点低效。使用这个更好。

    var orientation = 'portrait';

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

我本想将此留作评论,但由于我还太新,无法被允许留言。


1

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函数。因此,您不必使用setInterval或其他任何东西。以上代码已经很清楚明了。

希望这能帮到您!


嗨KRIZTE,如果你看我的代码,你会发现我正在使用window.orientationChange事件 - 就像你发布的代码一样。关键是:orientationChange在测试设备上没有被触发。也许这只是一个Android的问题 - 你有在IOS上测试吗?-- setInterval仅用于测试,它显示不仅orientationChange未被触发,而且当直接从ccw方向更改为cw方向或反之时,window.orientation也是错误的。再次强调:我知道应该设置/触发的属性和事件 - 但这并没有起作用。 - Gisela

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接