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
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.
I'm testing on 2 Android devices, running 2.3.5 and 4.4.4, both show the same behavior.
So, the questions are:
clarification
I want my app to show the direction from the user's location to a target geolocation.
To do this I need to 2 different orientation informations:
To get the compass heading this plugin is used:
org.apache.cordova.device-orientation 0.3.10 "Device Orientation"
I use
navigator.compass.watchHeading
to get heading updates - this part is working.
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.
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.
(Test-)Code used to check window.orientation:
setInterval(function(){
console.log('WO ' + window.orientation);
}, 1000);
waiting for orientationchange events:
window.addEventListener('orientationchange', function(){
console.log('window.orientation : ' + window.orientation);
});
annotated Log:
[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'
Just wanted to add that the solution code above is a bit inefficient. Much better to use this instead.
var orientation = 'portrait';
if (Math.floor(Math.abs(window.orientation)/90) === 1) {
orientation = 'landscape';
}
Would have left this as a comment but I'm still too new to this to be allowed to leave one.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With