cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Getting Orientation of Mobile Device via Javascript

No ratings

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,...

Version history
Revision #:
5 of 5
Last update:
‎06-05-2020 11:52 AM
Updated by:
 
Labels (2)
Contributors