Getting Orientation of Mobile Device via Javascript

[#1]

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 :("); 
  }
}

Spoiler

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 :

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.