我目前正在处理的应用程序需要知道设备的方向,因此我使用此代码来检测orientationchange事件:
window.addEventListener('orientationchange', function(){
theApp.orientationChange();
});
和此属性获取实际的方向值:
window.orientation
问题:在两种横向模式之间切换时,不会触发任何事件,并且方向分别保持在现在错误的90或-90度。
我在2台Android设备上进行测试,运行2.3.5和4.4.4,两者都表现出相同的行为。
所以,问题是:
澄清
我希望我的应用程序显示从用户位置到目标地理位置的方向。
要做到这一点,我需要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
...
答案 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';
}
本来会留下这个评论,但我还是太新了,不允许留下一个。