Getting Orientation of Mobile Device via Javascript and detecting of device rotation on runtime.
In some cases it could be a goal to get change the text of a widget based on the mobile devices orientation. This could be done via Javascript and css. Follwong possible solutions:
- In CSS. More details here https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
- In Javascript with various method:
Here is some documentation :
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
As we can read, it is not supported in Safari web browser for iOS.
- In a new Project, in 2D canevas, I have added one Button and one Label named label-Result.
In home.js, we can create this function very similar to the one provided in documentation above.
$scope.screenOrientation = function() { var orientation = screen.msOrientation || (screen.orientation || screen.mozOrientation || {}).type; if (orientation === "landscape-primary" || orientation === "landscape-secondary") { $scope.setWidgetProp("label-Result", "text", "landscape"); console.log("landscape"); } else if (orientation === "portrait-primary" || orientation === "portrait-secondary") { $scope.setWidgetProp("label-Result", "text", "portrait"); console.log("portrait"); } else if (orientation === undefined) { $scope.setWidgetProp("label-Result", "text", "The orientation API isn't supported in this browser"); console.log("The orientation API isn't supported in this browser :("); } }
The following observation when we test it :
- In Preview, in Chrome web browser, in my workstation in Windows when clicking the button, result is always landscape
- on Samsung S7 and S9+, in Vuforia View when clicking the button, result is always portrait. Vuforia View doesn't change screen position and rotating the mobile
- In iPad 6 generation, in Vuforia View when clicking the button, result is The orientation API isn't supported in this browser. Vuforia View screen is changing when rotating tablet
- So the JavaScript solution above has some problems which we can try to fix using another approach:
-
As mentioned the previous solution could be used only on start- but it will not detect a dyncamic change - e.g. rotate the device.This solution was tested and working in preview and on android. It seems that it does not work on IOS. ON HoloLens we have only landscape mode- so that this has no relvance.
For Preview mode and Android devices the following code is working fine:
//============================================ angular.element(document).ready(function() { angular.element(window).on('resize', function(evt) { //console.log("resized window evnt :");console.warn(evt); var message = '' var win = evt.path[0]; if(win.innerWidth > win.innerHeight){ // LANDSCAPE -> do something here call your landscapeFunc() message = "current orientation is Landscape!" } else { // PORTRAIT -> do something here your PortraitFunc() message = "current orientation is Portrait!" } twx.app.fn.addSnackbarMessage(message,"twLogo"); }); }) //////////////////////
We need to pay attion here that we are in angular js environment and the windows variable seems to be static an is passed on system start - therefore it will not update dynamicaly.
There is also an soluton for IOS which was verfied in a tests - e.g. it works fine (IPad 6 generation). Possibly this solution will work also on window -need to be testet. Following code:function readDeviceOrientation() { //only for IOS var orient="unknown" switch (window.orientation) { case 0: orient= "Portrait" break; case 180: orient= "Portrait Upside-down"// Portrait (Upside-down) break; case -90: orient= "Landscape (Clockwise)"// Landscape (Clockwise) break; case 90: orient= "Landscape (Counterclockwise)"// Landscape (Clockwise)// Landscape (Counterclockwise) break; } twx.app.fn.addSnackbarMessage("IOS Orientation: "+orient,"twLogo"); }
And register the event on orientation change:
angular.element(document).ready(function () { if($scope.app.isIOS()){ $scope.setWidgetProp('label-3', 'text', "called on IOS Device"); twx.app.fn.addSnackbarMessage("called on IOS Device","twLogo"); window.onorientationchange = readDeviceOrientation;} } });
Here is a function for testing of the current device -> please, check for more details this post( How to define functions to check the different mobile platforms ).
- So, to go deeper, we can see this thread in stackoverflow.com :
- IOS Reference: