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

Community Tip - You can change your system assigned username to something more personal in your community settings. X

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
  2. In Javascript with various method:

Here is some documentation :


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");
  else if (orientation === "portrait-primary" || orientation === "portrait-secondary")
    $scope.setWidgetProp("label-Result", "text", "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!"     

     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"
        case 180:  
            orient= "Portrait Upside-down"// Portrait (Upside-down)
        case -90:  
             orient= "Landscape (Clockwise)"// Landscape (Clockwise)
        case 90:  
             orient= "Landscape (Counterclockwise)"// Landscape (Clockwise)// Landscape  (Counterclockwise)
        }"IOS Orientation: "+orient,"twLogo");

    And register the event on orientation change:

    angular.element(document).ready(function () {
      	$scope.setWidgetProp('label-3',  'text',  "called on IOS Device");"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 :

  • IOS Reference:,%3D%20%22LANDSCAPE%20%22%20%2B%20window.

Version history
Last update:
‎Jun 05, 2020 11:52 AM
Updated by:
Labels (2)