Getting Orientation of Mobile Device via Javascript

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:

1.  In CSS. More details here https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
2. 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 :("); 
 }
}

• 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 :

https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-d...

• IOS Reference:

http://www.williammalone.com/articles/html5-javascript-ios-orientation/#:~:text=The%20JavaScript%3A,%3D%20%22LANDSCAPE%20%22%20%2B%20window.