Question

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

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

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

window.orientation

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

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

所以，问题是：

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

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

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

指南针标题
屏幕方向

要获得罗盘标题，请使用此插件：

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

Answer 1

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

Answer 2

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

Answer 3

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

<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或任何东西。上面的代码是不言自明的。

希望它有所帮助！

Answer 4

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

    var orientation = 'portrait';

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

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

科尔多瓦检测方向变化

4 个答案: